No condition comments before the DOCTYPE

Published 2012-02-04 01:37 by Leif Halvard Silli.

Or: How Internet Explorer handles <!----> different from <!--[]-->

Table of comments
Name Example Shortest variant
Superset HTML comments <!-- Lorem --> <!---->
Subset Conditional Comments <!--[if ok]>Lorem<![endif]--> <!--[if o]><![endif]-->
Subset No condition comments <!--[ Lorem ]--> <--[]-->
Comments before the DOCTYPE — how legacy IE reacts differently to them
  • HTML comments before the DOCTYPE will, up until and including IE9, bring the browser into quirks-mode. However, with IE10 a new chapter will begin, where this apparently is no more the case. But until then, regular comments before the DOCTYPE is a no-no. This is pretty well known — but still a gotcha to many.
  • Conditional comments before the DOCTYPE will eithe be ignored (in case of [if !ie]) or their “content” will be read (in case of [if ie]) — and in the latter case it is the “content” which decidees whether IE lands in quirks-mode or not. But even if it is ignored or completely emtpy, IE still reacts to it: As described in the posting about how to optimally insert X-UA-Compatible, IE8 and IE9 need to see an (usually empty) conditional comment before the doctype, or else it won’t react to the “content” of (in pseudo-code) <!--[if ie]>X-UA-Compatible<![endif]-->.
  • No condition coment: The news in this article — (quite) new to me at least — is that, with regard to IE8 and IE9’s abiltiy to react to the <!--[if ie]>X-UA-Compatible<![endif]-->, then “no condition comments” before the DOCTYPE will bring IE into quirks mode but it will also somehow prepare IE8 and IE9 to react to <!--[if ie]>X-UA-Compatible<![endif]-->. Thus, note: IE7 and below, will be brought into Quirks-Mode by this method — so unless this does not matter or unless this is precisely what you want, you might want to avoid this method.
Example code

This brings IE8 and above into no-quirks mode (AKA standards mode), while IE7 and below are brought into quirks mode.

<!--[]--><!DOCTYPE html>
<html>
   <head>
       <!--[if !ok]>
          <meta http-equiv=X-UA-Compatible content="IE=Edge">
       <![endif]-->
      <title>Conditionless conditional comment</title>
   </head>
When to use it?

One should of course consider whether IE7 and IE6 need to be in no-quirks mode before choosing this method. If they can’t be in quirks mode, then it is better to use the optimal way to insert x-ua-compatible.

|