]> How To Use IE Conditional Comments in “XHTML” | CodeDread Blog

There’s a lot going on in the HTML Working Group mailing list right now about opt-in mechanisms for HTML5, discussions with smart people like Chris Wilson (co-chair and Microsoft IE champion) and Ian Hickson (WHATWG champion). I’ve going to sidestep the polemics for now – I’ve been trying to distill my own thoughts on that big debate, but things are still swirling around in my head because I’m still learning about the history of HTML, quirks mode, standards mode, DOCTYPEs, etc. Instead, I’m just going to write a (hopefully) quick entry on something I just figured out today.

If you are a web developer, I am sure you are very familiar with how difficult it can be to get the Internet Explorer browser to display your web pages correctly and still use web standards that are implemented more properly by other browsers. Many hundreds of people wish that this were not so, but it’s an ugly fact in web development today. IE includes a clever little feature called “Conditional Comments” that can allow you to select what elements on your page are displayed for certain versions of IE. I wish that Conditional Comments were not necessary (because they muckify my markup), but that is the state things are in right now.

The traditional way of explaining this is by some examples:

<!--[if IE]>
  <p>Only IE will display this paragraph</p>
<![endif]-->

Figure 1 – Conditional Comments for IE

If you know your HTML (especially how HTML comments work), then it should be pretty obvious that the whole code above looks like one big comment, meaning that it will not be displayed. However, IE treats the square brackets differently by displaying the code between [if IE] and [endif] as code that it should display.

So that’s how to include code only for IE and exclude code from other browsers. Now how to do the reverse:

<![if !IE]>
  <p>All browsers except IE will display this paragraph</p>
<![endif]-->

Figure 2 – Conditional Comments for Other Browsers (The Wrong Way)

In HTML browsers, the above code displays in every browser except IE (which will ignore everything between [if !IE] and [endif]). It seems to rely on some de-facto implementations where anything between <! and > is ignored by browsers as if it was a comment. The problem is that the above is not valid XHTML (comments in XHTML are anything between <!– and –>).

This is how I was feeding SVG to IE (in an <embed> element) and other browsers (in an <object> element). However, it always rankled me that my pages wouldn’t validate as XHTML as a result of the conditional comments.

Then, I was reading this aging article by Mark Pilgrim and found an example of valid “downlevel-revealed” comments (as Microsoft calls them):

<!--[if !IE]>-->
  <p>All browsers except IE will display this paragraph</p>
<!--<![endif]-->

Figure 3 – Conditional Comments for Other Browsers (The Right Way)

NOTE: It took me some time to figure this out because I was putting spaces between [if !IE]> and –> and between [endif] and –>. Make sure there are no spaces and things should work. Here’s a test page so you can see how things work. There should be 4 paragraphs displayed in every browser.

In fairness, after I started writing up this entry, I found that several other people had already discovered this.

Anyway, I know the other debate out there. The one about how XHTML is not worth the trouble and can be harmful if served as text/html, but I’ve already written too much today to get into that ;)

§357 · April 17, 2007 · Microsoft, Software, Technology, Tips, Web, XML · · [Print]

4 Comments to “How To Use IE Conditional Comments in “XHTML””

  1. zcorpan says:

    If you’re going to use CCs to work around bugs in current versions of IE, then the smart thing to do is to use [if lte IE 7]. Using [if IE] is asking for the workaround to be applied to all future versions of IE. With the former, MS can still fix their bugs without your page breaking because of the workarounds are applied even though the bug it was working around has been fixed, which may cause them to revert the bug. If they don’t fix the bug you were working around, then you could simply update the CC.

  2. zcorpan,

    Thanks for the tip. At the moment, I was using CCs to implement switching for how to serve SVGs. This code is central to one PHP library file so if I hear that IE8 will support SVG, then I’ll consider updating it in that one place.

    Jeff

  3. Ryan says:

    Thank you so much for this :)

    Help Greatly!

    Please Check out Programminghq.com once it is up :)

  4. ian says:

    thank you!!