All geek questions in one place

Conditional Comments and Valid XHTML

Given the code (which looks like it should be valid):

<!--[if lt IE 7]> <style type="text/css" media="screen"> <!-- div.stuff { background-image: none; } --></style><![endif]-->

The W3C validator throws a fit:

  • delimiter S in comment comment
  • Invalid comment declaration: start character name found outside the comment but inside the comment declaration
  • Character data is not allowed here.

etc.

I'm not quite sure what is going on. Are these "nested" comments? Tag generated by Zend Framework Viewhelper headStyle

 $this->headStyle()->prependStyle('div.stuff { background-image: none; }', array('conditional' => 'lt IE 7') );
+4
source share
6 answers

" --> " closes any comment; there is no concept of embedding comments into each other. Thus, in your code, the first " --> " closes both of your comments. Then <![endif]--> completely outside of any comments, so it makes no sense.

+6
source

You cannot have -- inside a comment, unless the part --> ends in valid XML / XHTML. Just how the comments work.

From this source :

For compatibility, the string β€œ-” (double hyphen) MUST NOT appear in the comments.

You should find a more standard way to distinguish between browsers (or, ideally, have a layout that does not require differentiation between browsers at all).

+7
source

These are nested comments. They are not allowed.

+2
source

... and why comment on the entire contents of <style> ? It is not as if you were coding a browser that is so dumb as to display it. (Even command line browsers hide / script style blocks.)

Edit: Ah wait. This is generated by Zend.

0
source

You must publish a new issue of the issue log. This is a good way to make such errors corrected. http://framework.zend.com/issues/secure/Dashboard.jspa

0
source

The answer asked by Phil Booth is true that your HTML comment syntax is incorrect; HTML comments cannot be nested. However, I would like to take one more step forward ...

You should not use HTML comments to hide your CSS or JavaScript from XHTML validation. You should use CDATA tags instead. This is the most universal solution that supports almost all browsers and browser versions, new and old.

 <head> <style type="text/css"> /* <![CDATA[ */ div.stuff { background-image: none; } /* ]]> */ </style> <script type="text/javascript"> /* <![CDATA[ */ function myFunction() { } /* ]]> */ </script> </head>

These articles explain in more detail why the above solution is correct:

0
source

Source: https://habr.com/ru/post/1285761/

More articles:


All Articles