CODEWITHSUNDEEP
htmlinternet-explorercommentsconditional-statementshtml5boilerplate
dikko2000
dikko2000

Reputation: 73

Need to understand IE conditional comments inside the HTML5-boilerplate

I couldn't understand one place in IE conditional comments in the HTML5-boilerplate. It's about this part:

<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->

The following two cases are quite straightforward,

  1. in cases of IE6/7, the condition "if gt IE 8" is FALSE, so it outputs <!-- -->;
  2. in cases of non-IE, "[if gt IE8]" and "[endif]" are not recognized, "<!--[if gt IE 8]><!-->" and "<!--<![endif]-->" are therefore standard HTML comments. So it outputs <html class="no-js">;

What confuses me is the case of IE9. In case of IE9, the condition "if gt IE 8" is TRUE, so it outputs the body of IE condition:

<!--> <html class="no-js"> <!--
  1. <!--> is empty comment;
  2. <html class="no-js"> is regular HTML output;

But what about the ending "<!--"? How is it handled? In my opinion, this beginning comment tag will turn everything following it into comments until it meets an end tag "-->". Isn't this a huge problem?

But I have never seen anybody questioning about this. So am I missing something? Can somebody explain this to me? Any help is appreciated.

Upvotes: 3

Views: 1517

Answers (2)

AD7six
AD7six

Reputation: 66238

In case of IE9, the condition "if gt IE 8" is TRUE

Indeed - so what happens is that whereas the comment is considered like so by other versions of IE:

<!--[if not my version]>
    Remove/ignore everything
<![endif]-->

Or simply:

""

For IE9 the conditional comments are treated just like any other comment:

<!--[if gt IE 8]><!-->
    <html class="no-js"> 
<!--<![endif]-->

I.e the (exploded) first and last lines are complete comments themselves

<!--[if gt IE 8]><!-->
^ start of a comment
    ^.............^ content not relevant
                   ^ end of a comment - first occurrence of `-->`

Therefore the browser (be it IE9+ or not-internet explorer) sees only:

<html class="no-js">

Upvotes: 2

roblarsen
roblarsen

Reputation: 452

I can't point to any actual reference for how they parse these (CC have always been sparsely documented) and can't remember who came up with this pattern, but IE isn't passed <!--> <html class="no-js"> <!-- it's passed only <html class="no-js"> It combines each full, valid comment block as the start and end of the conditional comments.

Here's an example that shows it's not passed an open comment

http://htmlcssjavascript.com/samples/cc.html

<!--[if IE 8]>        <p>IE8</p> <![endif]-->
<!--[if gt IE 8]><!--> <p>IE9+</p> <!--<![endif]-->
Not an open comment
-->

That outputs....

"IE9+

Not an open comment -->"

in IE9. If it left a comment open, of couse, the "Not an open comment" bit would disappear.

Upvotes: 0

Related Questions