Valid downlevel-revealed conditional comments

There’s been a bit of talk about the use of CSS hacks vs. Conditional Comments for supplying Internet Explorer for Windows with alternative CSS rules to compensate for its buggy behaviour. I personally prefer conditional comments since they allow me to send the buggy CSS to IE/Win only, with no risk of anything affecting good browsers.

So far, so good. But if you want to use conditional comments to hide something from Internet Explorer while keeping it visible to other browsers you’ll notice that your HTML is no longer valid if you use Microsoft’s Downlevel-revealed Conditional Comments (which really should be renamed to Uplevel-revealed).

The syntax suggested by Microsoft is this:

  1. <![if !IE]>
  2. do something
  3. <![endif]>

Unfortunately that is not valid HTML. And who is surprised to see Microsoft suggest the use of invalid HTML? Not me.

After a bit of searching I found an alternative and valid way of writing the conditional comments in a message from Lachlan Hunt to the whatwg mailing list: [whatwg] [WF2] Fixing Repetition Template Degradation in IE without Scripting.

The valid syntax for conditional comments that hide something from Internet Explorer for Windows is this:

  1. <!--[if !IE]>-->
  2. do something
  3. <!--<![endif]-->

Keep it handy for the next time you want to do something that is too advanced for Internet Explorer to handle.

Posted on November 14, 2005 in (X)HTML, Browsers, Web Standards

Comments

  1. November 14, 2005 by Jan Korbel

    Bookmarked. Thanks.

  2. amazing…i did come across the invalid version on a site recently. they were using it include a reference to an external javascript to anything other than IE 5. i did suggest that in this case, they could have as well implemented the browser sniffing in the javascript itself…

    handy to know.

  3. Great info! As you know, I totally agree with you about the usage of conditional comments, and the only time I use them is to include IE-specific CSS.

    But if I ever run into a case when I want to do the opposite, then I know how to do it.

    Really, thanks!

  4. Very useful, I saw it a while ago from Hixie for embeding flash validly without JavaScript.

    NB: For the secondary content to be accessibilty you should add another one to duplicate it.

  5. The most sad is that new hacks for IE7 are coming… (btw, we’re listening same music ;))

  6. November 15, 2005 by Paul D

    I still don’t like this method, because it means you start by writing hacked CSS for IE, and then you put the “good” CSS for all the other browsers inside the conditional-comment hack zone.

    I’d rather start with the good code, and then keep IE’s code segregated in its own ghetto.

  7. Paul D - if you want just IE to see something, use this expression:

  8. Sorry about that, the preview lied! Anyway, here’s the expression for real:

        <!--[if IE]>
        ...
        <![endif]-->
    
  9. I knew about that a long time ago, when I had to find it to serve an XHTML valid Java applet to MSIE, which doesn’t like the correct object tag parameters. You can see what I had to do here.

    Don’t click the link if you don’t want to see an applet, btw. Anyway, it’s a perfect example of when these forms of conditional comments are necessary.

  10. Completely unrelated but I’m curius, did you use my “code-tool” when you made the code listing?

  11. Conditional comments are used to great effect by Dean Edwards in his IE7 Compliance Patch. A very useful tool.

  12. You know I used to use the “Microsoft Downlevel/Uplevel-revealed” method for the Switch to Firefox campaign. Now I ask myself why did I ever stop!

  13. November 15, 2005 by Roger Johansson (Author comment)

    Paul D: Remember that this can be used to hide anything from IE/Win, not just CSS.

    Mats: Nope, I coded these simple listings by hand :-).

  14. I found a small problem with this (or I misinterpred the MS directions). I was trying to apply a different margin to a div to get around a display issue in IE. The conditionals did indeed apply the contained data, but IE insisted on displaying the opening and closing tags of the condiftional statement. I had to place it in the body rather than the head and wrap the conditional in a display: none; to get IE to not display the code. If there is a better solution I’d appreciate being pointed in the right direction.

    <div id=”ahem”>
    <!—[if IE lte 7.5]>
    <style type=”text/css”>
    #contentarea { margin: 0 192px 0 0; }
    </style>
    <![endif]—>
    </div>

  15. I found the same problem anyone have solutions?

  16. November 17, 2005 by Roger Johansson (Author comment)

    I think you need to change the opening tag to this:

    <!--[if lte IE 7.5]>
    

    Not sure why you would use that version number, but try if that works. And keep this in the head element - style elements are not allowed in the body element.

  17. This is an interesting tool, but the first thing I’ll use it for is writing a thankyou in my page footer for people not using Internet Explorer…

    Oh, I could have done it before with JS, but this makes things 100 times smarter.

    The only CSS hack I use is the !important one, for example, height : auto !important; height : 1%; can be used to give IE layout.

    This type of hack forces me to write it all into one CSS file.

  18. Thanks - very handy tip!

  19. <!—[if lte IE 7.5]>

    does work but according to the Microsoft page examples it should be

    <!—[if IE lte IE 7.5]>

    May have been a typo on their part.

    I chose that version number arbitrarily so as to cover all the current bases including the new IE7 beta(aren’t they all?)

    As to style elements not allowed in the body it not only worked fine but validates as well. Go figure.

    I have since gone with a simpler <!—[if IE]> in the head

  20. November 20, 2005 by Roger Johansson (Author comment)

    It validates because the conditional comment hides the style element from the validator :-). Sure, only IE sees it, and IE generally accepts anything you throw at it, but you never know… so better keep it where it’s supposed to be.

  21. If you plan to use this to show things to Browsers and e. g. IE 6, you could write:

    <!—[if IE 6]>—> do something <!—<![endif]—>

    but that would show the closing “—>” of the comment tags to IE users.

    If you expand the code to

    <!—[if IE 6]> <!—> do something <!—<![endif]—>

    it doesn’t and it validates.

    Or is there any drawback in doing so?

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.