"CDATA" stuff within STYLE Options

[Peter Evans]

Throwing a page with a DOCTYPE optimistically specifying XHTML 1.0 strict (but without the XML thingie at the very top) into a web-interfaced old (2002) copy of HTML Tidy brought no surprises other than (i) garbling of UTF8 (even though I'd specified UTF8) and (ii) a change from

<style type="text/css" media="screen">
@import url(../common/common.css);
@import url(../common/text.css);
</style>

into

<style type="text/css" media="screen">
/*<![CDATA[*/
@import url(../common/common.css);
@import url(../common/text.css);
/*]]>*/
</style>

I can't see how they could do anything for any newish browser as they're commented out. Browsers predating CSS and thus not understanding the commend convention would risk rendering that bit more of junk text on the screen. If I'm right here, this could just as well be

<style type="text/css" media="screen">
/* Are you actually reading this inside the web page? */
@import url(../common/common.css);
@import url(../common/text.css);
/* If so, perhaps you're using a really retro browser. Netscape 2? Mosaic? */
</style>

or anything else.

"CDATA", ah, yes, I think I've heard of that somewhere. I tried googling for this but the results were obscure. Do these extra bytes help either theoretically or in any real-world way?


This post has been edited by Peter Evans: Aug 24 2007, 06:35 AM

[Frederiek]

Maybe this will clear it up a bit: http://www.w3.org/TR/xhtml1/#h-4.8

[Christian J]

This one elaborates: http://developer.mozilla.org/en/docs/Prope...XHTML_Documents

Why not use a LINK element to load the main style sheet (and @import inside for additional ones)? That way you also avoid the risk for http://bluerobot.com/web/css/fouc.asp/

But personally I wouldn't bother with browsers too old to understand that STYLE and SCRIPT should be hidden.

[Peter Evans]

This one elaborates: http://developer.mozilla.org/en/docs/Prope...XHTML_Documents

Not really. If I understand it right, it explains how

<style type="text/css" media="screen">
<![CDATA[
@import url(../common/common.css);
@import url(../common/text.css);
]]>
</style>

would let the style material contain "<" and "&". However, Tidy comments this stuff out, resulting in:

<style type="text/css" media="screen">
/*<![CDATA[*/
@import url(../common/common.css);
@import url(../common/text.css);
/*]]>*/
</style>

Why not use a LINK element to load the main style sheet (and @import inside for additional ones)? That way you also avoid the risk for http://bluerobot.com/web/css/fouc.asp/

Mostly because I hadn't heard of "FOUC". But now that I have heard of it, I'm still reluctant to do it because Meyer writes (or a few years ago wrote) that browsers aren't good at having style sheets choose other style sheets. The matter of CDATA aside, it could be better to have

<link rel="stylesheet" type="text/css" media="screen, print" href="anodyne.css">
<style type="text/css" media="screen">
@import url(../common/common.css);
@import url(../common/text.css);
</style>

where anodyne.css consists of as little as

body {font-family:sans-serif}

or similar.

[pandy]

The code Tidy added isn't protecting old browsers (there is no HTML comment there). It protects new browsers. As I understand it, the CDATA is only needed if the embedded code contains certain characters, none of which I think is present in the @import rules (see Frederiek's link).

I haven't bothered to read up much on this since I don't do XHTML, so I could have misunderstood it all.

[ADDED]
Source peep at for example ALA. They don't use CDATA.

[Frederiek]

No comment, Pandy? The /**/ pair sure looks a CSS comment to me.

Anyway, I searched a (little) bit and found that CDATA is merely related to SGML an XML See this Wiki and the W3C CDATA section in the XML 1.0 Recommandation. Another site talks about Dealing with XHTML (look a little further down) an commenting CSS out. I don't know if it's accurate.
Or this quote from W3C (although they are talking about SVG):

Note how the CSS style sheet is placed within a CDATA construct (i.e., <![CDATA[ ... ]]>), which is necessary since CSS style sheets are not expressed in XML.

An XSL style sheet ([XSLT1]) can also be embedded within a 'style' element, in which case it is not necessary to enclose the style sheet within a CDATA construct, since XSL style sheets are expressed in XML.

[pandy]

No comment, Pandy? The /**/ pair sure looks a CSS comment to me.

Sorry, I scrolled back and accidentally looked at the code in Peter's other post. I'm not familiar with that construct (CDATA inside CSS comments). Is it kosher? I was referring to the absence of the old HTML comment hack anyway. As you can notice, I'm more confused than ever.

Anyhow, I don't think CDATA is needed for an @import rule.

[Christian J]

This one elaborates: http://developer.mozilla.org/en/docs/Prope...XHTML_Documents

Not really. If I understand it right, it explains how

<style type="text/css" media="screen">
<![CDATA[
@import url(../common/common.css);
@import url(../common/text.css);
]]>
</style>

would let the style material contain "<" and "&".

That's correct, in my understanding.

However, Tidy comments this stuff out, resulting in:

<style type="text/css" media="screen">
/*<![CDATA[*/
@import url(../common/common.css);
@import url(../common/text.css);
/*]]>*/
</style>

I see no purpose or reason for doing that. Maybe it's mentioned in Tidy's documentation, or maybe it's a bug?

Why not use a LINK element to load the main style sheet (and @import inside for additional ones)? That way you also avoid the risk for http://bluerobot.com/web/css/fouc.asp/

Mostly because I hadn't heard of "FOUC". But now that I have heard of it, I'm still reluctant to do it because Meyer writes (or a few years ago wrote) that browsers aren't good at having style sheets choose other style sheets.

Can't remember any problems with @importing from another CSS file. With IE6 you can't specify a media type:

CODE

@import url(foo.css); /* should work in IE6 */
@import url(bar.css) screen; /* doesn't work in IE6 */

but that problem applies to @imported style sheets in STYLE elements too.

The matter of CDATA aside, it could be better to have

<link rel="stylesheet" type="text/css" media="screen, print" href="anodyne.css">
<style type="text/css" media="screen">
@import url(../common/common.css);
@import url(../common/text.css);
</style>

where anodyne.css consists of as little as

body {font-family:sans-serif}

or similar.

That should be OK.

[Christian J]

Another site talks about Dealing with XHTML (look a little further down) an commenting CSS out. I don't know if it's accurate.

When I tested this:

CODE

<style type="text/css">
<![CDATA[
body {color: red;}
]]>
</style>

my browsers ignored the CSS (at least when not served as XHTML). So the purpose of all this:

CODE

<style type="text/css">
<!--/*--><![CDATA[/*><!--*/

CSS goes in here

/*]]>*/-->
</style>

is to hide the XHTML workaround for the hiding trick.

[pandy]

I know that last one. That's Andrew Clover's über-ugly hack.
http://www.doxdesk.com/personal/posts/wd/20010911-cdata.html
On that page we can also read that the CDATA indeed screws things up if the page is served as HTML as Cristian found.

[Peter Evans]

Andrew Clover's über-ugly hack: yes, that page makes sense, and although I haven't yet had my second coffee of the day it looks to me as if HTML Tidy should have HTML-commented-out the XML-commenting-out asterisk-slash pairs.