Putting CSS inside HTML comments

Forum Moderators: not2easy

Message Too Old, No Replies

Putting CSS inside HTML comments

Should you comment out the CSS in the <head> of your pages?

MatthewHSE

5:19 pm on Mar 23, 2004 (gmt 0)

From another thread: [webmasterworld.com]

If you put the css code in the header of the html document you need to tell the browser that the css part is not text... the browser can see it's not html but it doesn't know what it is... so it usually just displays it as text. Once you put comments around the css, the html parser will ignore it.
However, the CSS parser will still find it and follow it, because CSS comments are different from html comments.

Really? I've never had a problem with the browser displaying my styles as text, and I've tested as far back as NN4. I'd be interested in hearing more on this.

Of course, I normally use an external stylesheet anyway, but I'm always looking for new things to learn! ;)

DrDoc

5:26 pm on Mar 23, 2004 (gmt 0)

That applies to stoneage browsers (meaning, browsers that are older than NN4). There is no reason whatsoever to "hide" your styles or JavaScripts using HTML comments. Browsers that understand CSS and JavaScript will assume that everything between <style> and </style> is not HTML, but CSS... and that everything between <script> and </script> is not HTML, but JavaScript.

In fact, I would discourage anyone from using HTML style comments.

W3C sheds some additional light on the matter:

Note that XML parsers are permitted to silently remove the contents of comments. Therefore, the historical practice of "hiding" scripts and style sheets within "comments" to make the documents backward compatible is likely to not work as expected in XML-based user agents.

[w3.org...]

HTML style comments is backward compatibility (for those that have to worry about NN2 and IE2 visitors), a "historical practice".
Forward thinking developers should not use HTML comments inside <style> or <script> tags any more.

hyperbole

6:57 pm on Mar 23, 2004 (gmt 0)

One reason to continue to comment out the <script> and <style> sections of the <head> is that some search engines depend on the comments being there so they can remove the css and javascript from the page before looking for words to index. If you don't have the comment tags on the page, your javascript and css will be indexed as well.

Reflection

9:07 pm on Mar 23, 2004 (gmt 0)

If you don't have the comment tags on the page, your javascript and css will be indexed as well.

Is this really the case? It makes much more sense for bots to look at content between tags(ie body, title meta etc.) than it does for them to index everything thats not between html comments.

I think people still comment their styles/scripts out of habit and not because they should. Personally I havent done it in years.

4css

10:18 pm on Mar 23, 2004 (gmt 0)

That applies to stoneage browsers (meaning, browsers that are older than NN4).

I have IE6, and when I did not comment out the style in the header (from the same thread that Matthew is refering to), my page would not work. Why is that?

DrDoc

10:28 pm on Mar 23, 2004 (gmt 0)

when I did not comment out the style in the header ... my page would not work

That must have been some other temporary glitch. IE6 (and actually ever since IE4) renders CSS fine -- with or without the comments. In fact, the issue at stake is not IE at all. It's certain standards compliant browsers. Since they are allowed to silently remove the contents of HTML comments they do, no matter if the comment happens to be inside a style or script.

encyclo

11:39 pm on Mar 23, 2004 (gmt 0)

As CSS-based sites are supposed to accessible in ancient browsers (without the styles, of course), I have tended to continue to use HTML comments around any inline styles in the head (including @import).

As for browsers permitted to silently remove HTML comments when parsing, is this the case for HTML or just in the XHTML spec? - I was under the impression it was the latter... If this is the case, I wouldn't use a comment on an XHTML page, but I would still use one on a HTML 4.01 page.

4css

12:00 am on Mar 24, 2004 (gmt 0)

Could it be because I had used homesite to do the page, and did not change the doctype from html 4 to the xhtml transitional? I always use the xhtml trans for my pages, and ones that I have played with the embedded style shows up in them, but not in the one that I just tossed together for the previous thread?

DrDoc

3:58 pm on Mar 24, 2004 (gmt 0)

The issue with comments is only related to XHTML and XML documents.

The issue with IE6... I don't think that's related to HomeSite. I use HomeSite as well, and I have never had any problems. Have you tried again since?

4css

11:56 am on Mar 30, 2004 (gmt 0)

The issue with comments is only related to XHTML and XML documents.
The issue with IE6... I don't think that's related to HomeSite. I use HomeSite as well, and I have never had any problems. Have you tried again since?

I'm sorry DrDoc, I guess I didn't make myself clear. With homsite the DTD was already at the top of the page and I usually change it, however I didn't change it this time to the xhtml transitional. So the issue was not related to homesite as it appears that my answer seemed to imply.

And no, I have not yet tried this again, but will. I have just been busy reading css things. Thanks for your reply. It is greatly appreciated.