Why does “<! --” comment out a style rule, but “<!--” does not?

Question

Take it easy on me. I am just learning HTML.

Accroding to http://www.w3.org/TR/html-markup/syntax.html#comments and many other sites I\'ve seen such as this http://www.w

Answer 1

I've seen people use <!-- --> in CSS style block for compatibility purpose.

In this case, old browsers that don't support CSS will comment it out to avoid errors.

<style type="text/css">   
<!-- td {border: 1px solid gray;} -->
</style>

will be interpreted as

<style type="text/css">
</style>

by old browsers that don't support CSS. This way these browsers avoid potential errors.

In modern browsers however, <!-- --> inside CSS style block will be ignored.

<style type="text/css">   
<!-- td {border: 1px solid gray;} -->
</style>

will be interpreted as

<style type="text/css">
td {border: 1px solid gray;}
</style>

by browsers with CSS support.

Answer 2

The string <! -- does not comment out anything. Instead, in CSS it is a syntax error, and the CSS error processing rules imply in this case that all of the style sheet is ignored.

The string <!-- does not start a comment either, but by CSS comment rules, it (as well as -->) is permitted and ignored (skipped) in certain contexts. Thus, the style sheet

<!-- td {border: 1px solid gray;} -->

is taken as

{border: 1px solid gray;}

You can check this out using the W3C CSS Validator. In the first case, with the space, an error is reported, and no valid CSS rules are reported. In the second case, no error is reported, and the rule is shown as valid.

In CSS, a comment always starts with /* and ends with */.

The reason for the special rules for <!-- and --> is that very long ago (and we are talking about the time when Netscape 1 was still in use), some browsers did not recognize the style element at all. This implied that they ignored the <style> and </style> tags and processed the content between them as if it were normal HTML content. This would have caused the style sheet to be displayed inside the page on such browsers. To prevent this, to “hide the style sheet”, the style sheet was wrapped between the HTML comment delimiters. Old browsers then simply ignored the content of the style element. But then a special rule had to be added to CSS spec to allow the delimiters.

This is ancient history, but old habits prevail and are even copied from other people’s code without understanding what they mean. There has been no reason to “hide the style sheet” for a long, long time, and the trick has now become a potential risk (due to possible interference with XHTML rules or to people’s confusion and typing errors).

So, never use <!-- (or <! --) in CSS.

Answer 3

CSS doesn't accept HTML <!-- comment here --> comments. Instead CSS uses /* comment */ to comment lines. Try that instead.