: While an HTML style element for inline CSS needs nothing but simple start and end tags (as of HTML5 and later) a more robust style element requires a precise series of overlapping code comments.Here is the answer if you want a code snippet to copy & paste Here is why:1. Not all HTML processors are CSS processors. While all modern browsers know how to parse CSS in style elements inside HTML, it is still quite reasonable for people to build HTML processors that do not, and many exist. There are plenty of ways that errant or deliberately misplaced markup inside a style element, like in a CSS comment, that such processors will not see, that can break them and cause unexpected and different results in different processors.Thus it makes your HTML more parseable, by more processors, if you can hide the entirety of the style sheet inside the style elmenet from such processing. A CDATA section does exactly that: here to not close the element */body > p { margin:1em } /* CDATA allows an unescaped > child combinator */ 2. However CSS syntax does not recognize a CDATA directive (even as of the latest published CSS Syntax Module Level 3¹ or editor's draft² as of this writing). CSS parsers may very well treat a CDATA directive as a syntax error that invalidates the subsequent style rule.Thus we must hide the CDATA directive, its opening and closing markup, from CSS parsers. CSS code comments /* ... */ can do exactly that: here to not close the element */body > p { margin:1em } /* CDATA allows an unescaped > child combinator *//* */ 3. This is close but still exposes HTML processors that do not process CSS to a minimal bit of content, the CSS comment opener and closer that are outside the CDATA section:/* */This recently showed up in a draft of the This Week in The #IndieWeb newsletter³, because portions of it are automatically constructed by parsing the HTML of MediaWiki pages for content, and one of those used a MediaWiki template that included a minimal style element to style the marked up content inserted by the template. A draft of the newsletter was showing raw CSS, extracted as text from the style element by the CSS-unaware parser extracting content. I was able to hide nearly all of it using CSS comments around the CDATA section opener and closer. Except for that little bit of CSS comment noise outside the CDATA section: /* */Fortunately there is one more tool in our toolbox that we can use. Simple HTML/SGML comments are ignored at the start and end of style sheets⁴ (noted there as CDO-token⁵ and CDC-token⁶), and thus we can use those to hide the last two remaining CSS comment pieces that were leaking out, like this: and . Note that the portion of the HTML comment directives that are inside CSS comments are ignored by CSS processors, which is why this works for both processors that parse CSS and those that do not.This last addition produces our answer, with no fewer than three different comment mechanisms (CDATA, CSS, HTML/SGML), overlapping to hide each other from different processors: here to not close the element */body > p { margin:1em } /* CDATA allows an unescaped > child combinator *//* By replacing those informative style rules with a style rule to be deleted, we have recreated the code snippet to copy & paste from the top of the post: Q.E.D.Afterword:If you View Source on this original permalink or my home page you can see the more robust style element in a real world example, following the IndieWeb Use What You Make⁷ principle.#CSS #style #styleElement #styleSheet #HTML #HTML5 #CSSsyntax #codecommentsGlossary:CDATA https://en.wikipedia.org/wiki/CDATACSS — Cascading Style Sheets https://en.wikipedia.org/wiki/CSSHTML — HyperText Markup Language https://en.wikipedia.org/wiki/HTMLHTML5 https://en.wikipedia.org/wiki/HTML5IndieWeb Principles https://indieweb.org/principlesMediaWiki https://en.wikipedia.org/wiki/MediaWikioriginal permalink https://indieweb.org/original_permalinkQ.E.D. https://en.wikipedia.org/wiki/Q.E.D.References:¹ https://www.w3.org/TR/css-syntax-3/² https://drafts.csswg.org/css-syntax/³ https://indieweb.org/this-week-in-the-indieweb ⁴ https://www.w3.org/TR/css-syntax-3/#stylesheet-diagram⁵ https://www.w3.org/TR/css-syntax-3/#CDO-token-diagram⁶ https://www.w3.org/TR/css-syntax-3/#CDC-token-diagram⁷ https://indieweb.org/use_what_you_make
's status on Saturday, 16-Mar-2024 00:35:00 EDT
While an HTML style element for inline CSS needs nothing but simple start and end tags (as of HTML5 and later) a more robust style element requires a precise series of overlapping code comments. Here is the answer if you want a code snippet to copy & paste Here is why: 1. Not all HTML processors are CSS processors. While all modern browsers know how to parse CSS in style elements inside HTML, it is still quite reasonable for people to build HTML processors that do not, and many exist. There are plenty of ways that errant or deliberately misplaced markup inside a style element, like in a CSS comment, that such processors will not see, that can break them and cause unexpected and different results in different processors. Thus it makes your HTML more parseable, by more processors, if you can hide the entirety of the style sheet inside the style elmenet from such processing. A CDATA section does exactly that: here to not close the element */ body > p { margin:1em } /* CDATA allows an unescaped > child combinator */ 2. However CSS syntax does not recognize a CDATA directive (even as of the latest published CSS Syntax Module Level 3¹ or editor's draft² as of this writing). CSS parsers may very well treat a CDATA directive as a syntax error that invalidates the subsequent style rule. Thus we must hide the CDATA directive, its opening and closing markup, from CSS parsers. CSS code comments /* ... */ can do exactly that: here to not close the element */ body > p { margin:1em } /* CDATA allows an unescaped > child combinator */ /* */ 3. This is close but still exposes HTML processors that do not process CSS to a minimal bit of content, the CSS comment opener and closer that are outside the CDATA section: /* */ This recently showed up in a draft of the This Week in The #IndieWeb newsletter³, because portions of it are automatically constructed by parsing the HTML of MediaWiki pages for content, and one of those used a MediaWiki template that included a minimal style element to style the marked up content inserted by the template. A draft of the newsletter was showing raw CSS, extracted as text from the style element by the CSS-unaware parser extracting content. I was able to hide nearly all of it using CSS comments around the CDATA section opener and closer. Except for that little bit of CSS comment noise outside the CDATA section: /* */ Fortunately there is one more tool in our toolbox that we can use. Simple HTML/SGML comments are ignored at the start and end of style sheets⁴ (noted there as CDO-token⁵ and CDC-token⁶), and thus we can use those to hide the last two remaining CSS comment pieces that were leaking out, like this: and . Note that the portion of the HTML comment directives that are inside CSS comments are ignored by CSS processors, which is why this works for both processors that parse CSS and those that do not. This last addition produces our answer, with no fewer than three different comment mechanisms (CDATA, CSS, HTML/SGML), overlapping to hide each other from different processors: here to not close the element */ body > p { margin:1em } /* CDATA allows an unescaped > child combinator */ /* By replacing those informative style rules with a style rule to be deleted, we have recreated the code snippet to copy & paste from the top of the post: Q.E.D. Afterword: If you View Source on this original permalink or my home page you can see the more robust style element in a real world example, following the IndieWeb Use What You Make⁷ principle. #CSS #style #styleElement #styleSheet #HTML #HTML5 #CSSsyntax #codecomments Glossary: CDATA https://en.wikipedia.org/wiki/CDATA CSS — Cascading Style Sheets https://en.wikipedia.org/wiki/CSS HTML — HyperText Markup Language https://en.wikipedia.org/wiki/HTML HTML5 https://en.wikipedia.org/wiki/HTML5 IndieWeb Principles https://indieweb.org/principles MediaWiki https://en.wikipedia.org/wiki/MediaWiki original permalink https://indieweb.org/original_permalink Q.E.D. https://en.wikipedia.org/wiki/Q.E.D. References: ¹ https://www.w3.org/TR/css-syntax-3/ ² https://drafts.csswg.org/css-syntax/ ³ https://indieweb.org/this-week-in-the-indieweb ⁴ https://www.w3.org/TR/css-syntax-3/#stylesheet-diagram ⁵ https://www.w3.org/TR/css-syntax-3/#CDO-token-diagram ⁶ https://www.w3.org/TR/css-syntax-3/#CDC-token-diagram ⁷ https://indieweb.org/use_what_you_make
mmn: @einebiene Netflix explicitly has been actively promoting, pushing and implementing #EME in #HTML5 as we know from @dbd et al. DVDs are bad but not I-don't-want-to-communicate-with-such-a-bad-person bad.
mmn's status on Saturday, 20-May-2017 14:48:56 EDT
@einebiene Netflix explicitly has been actively promoting, pushing and implementing #EME in #HTML5 as we know from @dbd et al. DVDs are bad but not I-don't-want-to-communicate-with-such-a-bad-person bad.
: #HTML5 instead of YouTube video of music + album art: ht: @zcorpan
's status on Wednesday, 18-Jan-2017 13:49:52 EST
#HTML5 instead of YouTube video of music + album art: ht: @zcorpan
mmn: @fnadde42 Meh, what does it matter when #Netflix has made sure to implement #DRM in #HTML5 and thus noone will be able to right-click to copy anything at all anyway?
mmn's status on Sunday, 15-Jan-2017 16:19:27 EST
@fnadde42 Meh, what does it matter when #Netflix has made sure to implement #DRM in #HTML5 and thus noone will be able to right-click to copy anything at all anyway?
cmhobbs: RT @mjd And no, #BBC et al., the problem isn't that "Media playback is unsupported on [my] device", it's that the open standard for media playback isn't supported by you. #NoScript #HTML5
cmhobbs's status on Wednesday, 16-Dec-2015 11:14:19 EST
RT @mjd And no, #BBC et al., the problem isn't that "Media playback is unsupported on [my] device", it's that the open standard for media playback isn't supported by you. #NoScript #HTML5
mjd: And no, #BBC et al., the problem isn't that "Media playback is unsupported on [my] device", it's that the open standard for media playback isn't supported by you. #NoScript #HTML5
mjd's status on Wednesday, 16-Dec-2015 06:02:54 EST
And no, #BBC et al., the problem isn't that "Media playback is unsupported on [my] device", it's that the open standard for media playback isn't supported by you. #NoScript #HTML5
mmn: @cyberunions Yes you have new listeners. And they're coming from !gnusocial :] I'm wondering however if you could add time tags (I think that should be pretty easy with an #HTML5 player and simple javascript - or people who don't u https://social.umeahackerspace.se/notice/285373
mmn's status on Wednesday, 14-Oct-2015 05:12:27 EDT
@cyberunions Yes you have new listeners. And they're coming from !gnusocial :] I'm wondering however if you could add time tags (I think that should be pretty easy with an #HTML5 player and simple javascript - or people who don't u…
bobjonkmanformer: Thanx @CBC, @CBCradio! #HTML5 support would be good; a link to plain audio files (mp3, ogg) would be better
bobjonkmanformer's status on Thursday, 09-Jul-2015 23:42:01 EDT
Thanx @CBC, @CBCradio! #HTML5 support would be good; a link to plain audio files (mp3, ogg) would be better
Former Bob Jonkman -- Please use the new server at https://gs.jonkman.ca
mmn: Just reminding everyone: #Netflix coerced the #W3C into implementing #DRM in #HTML5. They e https://social.umeahackerspace.se/notice/210835
mmn's status on Sunday, 12-Apr-2015 08:28:22 EDT
Just reminding everyone: #Netflix coerced the #W3C into implementing #DRM in #HTML5. They e…
aroque: I attached a video to a notice on my local !gnusocial install. On pages containing that notice, #firefox https://gnusocial.no/notice/105524
aroque's status on Wednesday, 11-Mar-2015 19:27:49 EDT
I attached a video to a notice on my local !gnusocial install. On pages containing that notice, #firefox…
mmn: Developing is too fun. Especially when I generally just complete stuff I've half-completed https://social.umeahackerspace.se/notice/193640
mmn's status on Tuesday, 24-Feb-2015 20:23:23 EST
Developing is too fun. Especially when I generally just complete stuff I've half-completed …
mmn: The element even uses the #HTML5 and is, I believe, properly marked up for #microformats2 ;)
mmn's status on Thursday, 08-Jan-2015 12:00:28 EST
The element even uses the #HTML5 and is, I believe, properly marked up for #microformats2 ;)
robmyers: RT @erkanyilmaz #HTML5 visualizations of aesthetic proof-of-work schemes for #cryptocurrencies. e.g. "Cryptocu http://oracle.skilledtest ...
robmyers's status on Monday, 20-Jan-2014 14:10:13 EST
RT @erkanyilmaz #HTML5 visualizations of aesthetic proof-of-work schemes for #cryptocurrencies. e.g. "Cryptocu http://oracle.skilledtest ...
erkanyilmaz: #HTML5 visualizations of aesthetic proof-of-work schemes for #cryptocurrencies. e.g. "Cryptocu…
erkanyilmaz's status on Saturday, 18-Jan-2014 17:52:42 EST
#HTML5 visualizations of aesthetic proof-of-work schemes for #cryptocurrencies. e.g. "Cryptocu…
lnxw37: @inscius That is my experience also, even with the #HTML5 addon.
lnxw37's status on Sunday, 08-Dec-2013 09:54:42 EST
@inscius That is my experience also, even with the #HTML5 addon.
lnxw37: RT @lnxw37 @question I am starting to hate #YouTube. Whenever I visit to hear a song it wants #flash, not #HTML5. Rubbish.
lnxw37's status on Saturday, 30-Nov-2013 14:51:23 EST
RT @lnxw37 @question I am starting to hate #YouTube. Whenever I visit to hear a song it wants #flash, not #HTML5. Rubbish.
lnxw37: @question I am starting to hate #YouTube. Whenever I visit to hear a song it wants #flash, not #HTML5. Rubbish.
lnxw37's status on Thursday, 24-Oct-2013 21:11:11 EDT
@question I am starting to hate #YouTube. Whenever I visit to hear a song it wants #flash, not #HTML5. Rubbish.
marc0s: RT @erkanyilmaz Congrats! 5 days ago @hellekin and team finished Volume I, Number 0 of their monthly #newsletter. Topics: #Pump.io status:
marc0s's status on Wednesday, 31-Jul-2013 09:18:27 EDT
RT @erkanyilmaz Congrats! 5 days ago @hellekin and team finished Volume I, Number 0 of their monthly #newsletter. Topics: #Pump.io status:…
erkanyilmaz: Congrats! 5 days ago @hellekin and team finished Volume I, Number 0 of their monthly #newslett http://oracle.skilledtests.com/notice/250532
erkanyilmaz's status on Wednesday, 31-Jul-2013 08:49:43 EDT
Congrats! 5 days ago @hellekin and team finished Volume I, Number 0 of their monthly #newslett…
hs0ucy: «5 HTML5 Features you need to know» ~ http://yh5.ca/95 #WebDev #HTML5
hs0ucy's status on Sunday, 16-Jun-2013 10:55:14 EDT
«5 HTML5 Features you need to know» ~ http://yh5.ca/95 #WebDev #HTML5
hs0ucy: RT @mozillazinefr RT @OpenWebDevice: 5 fonctionnalités du #HTML5 que vous devez connaître http://ur1.ca/e6jxt par @AdnaneBelmadiaf
hs0ucy's status on Saturday, 15-Jun-2013 10:05:45 EDT
RT @mozillazinefr RT @OpenWebDevice: 5 fonctionnalités du #HTML5 que vous devez connaître http://ur1.ca/e6jxt par @AdnaneBelmadiaf
mozillazinefr: RT @OpenWebDevice: 5 fonctionnalités du #HTML5 que vous devez connaître http://ur1.ca/e6jxt par @AdnaneBelmadiaf
mozillazinefr's status on Saturday, 15-Jun-2013 09:59:41 EDT
RT @OpenWebDevice: 5 fonctionnalités du #HTML5 que vous devez connaître http://ur1.ca/e6jxt par @AdnaneBelmadiaf
lnxwalt: Now listening: Christopher Cross “Sailing” http://ur1.ca/ebef1 #1980s #html5
lnxwalt's status on Friday, 14-Jun-2013 00:58:13 EDT
Now listening: Christopher Cross “Sailing” http://ur1.ca/ebef1 #1980s #html5
lnxwalt: Now listening: Kid Creole and the Coconuts “Endicott” http://ur1.ca/ebe4s #1980s #html5
lnxwalt's status on Friday, 14-Jun-2013 00:26:12 EDT
Now listening: Kid Creole and the Coconuts “Endicott” http://ur1.ca/ebe4s #1980s #html5
lnxwalt: Now listening Madness “Our House” http://ur1.ca/ebc2p #song #html5 #1980s
lnxwalt's status on Thursday, 13-Jun-2013 20:50:08 EDT
Now listening Madness “Our House” http://ur1.ca/ebc2p #song #html5 #1980s
lnxwalt: Now listening: Culture Club The War Song #html5 #song #1980s cc: @question
lnxwalt's status on Sunday, 02-Jun-2013 02:22:12 EDT
Now listening: Culture Club The War Song #html5 #song #1980s cc: @question
lnxwalt: Now listening: Kid Creole & the Coconuts Endicott #song #html5 #1980s cc: @question
lnxwalt's status on Sunday, 02-Jun-2013 01:55:52 EDT
Now listening: Kid Creole & the Coconuts Endicott #song #html5 #1980s cc: @question
lnxwalt: Now listening: Human League Don’t You Want Me #song #html5 #1980s cc: @question
lnxwalt's status on Sunday, 02-Jun-2013 01:47:54 EDT
Now listening: Human League Don’t You Want Me #song #html5 #1980s cc: @question
lnxwalt: Got tired of that. Now listening to General Public Tenderness #song #html5 cc: @question #1980s
lnxwalt's status on Sunday, 02-Jun-2013 01:41:15 EDT
Got tired of that. Now listening to General Public Tenderness #song #html5 cc: @question #1980s
lnxwalt: Here’s a #song for @douglasawh Air Supply I’m all out of love #html5 cc: @question
lnxwalt's status on Sunday, 02-Jun-2013 01:38:53 EDT
Here’s a #song for @douglasawh Air Supply I’m all out of love #html5 cc: @question
lnxwalt: Now listening: #song Olivia Newton-John If You Love Me, Let Me Know #html5
lnxwalt's status on Sunday, 02-Jun-2013 01:35:46 EDT
Now listening: #song Olivia Newton-John If You Love Me, Let Me Know #html5
lnxwalt: @mbjunior Now listening: Bay City Rollers “Money Honey” #HTML5
lnxwalt's status on Saturday, 01-Jun-2013 13:06:03 EDT
@mbjunior Now listening: Bay City Rollers “Money Honey” #HTML5