Conditional Comments

I talk about about using conditional comments to serve a stylesheet specifically aimed at resolving Internet Explorer unique interpretation of CSS, however, until recently this blog was more a case of do what I say, not do what I do. In the rush the to get the blog up and running I used a couple of hacks, mainly the !important hack to serve different values to IE and other browsers.

After reading Tantek Celik’s Pandora’s Box (Model) of CSS Hacks And Other Good Intentions I decided it was about time I practised what I preached. Conditional comments are the best way to serve CSS specifically to IE. They specifically target IE only, all other browsers see the conditional comment as a comment and treat it as such. So it a clean, efficient way, that does not require javascript or hacks (that might be interpreted differently by another browser) and is valid HTML (It is a comment to every other browser except IE).

For those of you who have not seen a conditional comment in action, here is the code from this page:


<!-- for microsoft browsers -->
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="/xtras/ieonly.css" media="screen" />
<![endif]-->

Added December 19: Warning, do not cut and paste this code into your HTML. WordPress does not handle code the way I (or probably you ) would expect, so get it from this text file (right click and save as).

So all versions of IE get the same additional stylesheet. If I need to serve different stylesheets to IE6 and IE5.5 and below, because IE5.5 and below uses incorrect box model while IE6 in standards-compliant mode uses the same box model as everybody else. So the code in your head section of the page would include.


<!-- for IE6 only -->
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="/xtras/ie6only.css" media="screen" />
<![endif]-->
<!-- for IE 4, 5 & 5.5 -->
<!--[if lt IE 6]>
<link rel="stylesheet" type="text/css" href="/xtras/old.css" media="screen" />
<![endif]-->

Added December 19: Warning, do not cut and paste this code into your HTML. WordPress does not handle code the way I (or probably you ) would expect, so get it from this text file (right click and save as).

For more on conditional comments visit the MSDN Library.

Updated 10 December just modified /wp-includes/functions-formatting.php file so — renders as — and not as &#8211

Updated 7 March 2006 typo I missed, and it was a big one, thanks Jen Williams

12 Responses to “Conditional Comments”

  1. Nick Cowie » IE7 beta2 Says:

    […] I was pleasantly surprised, other than this blog, all the other sites are working fine. WorkLife Balance which uses a png background to get the semi transparent menu bar in all other browsers except IE6 and below. Which gets feed by conditional comments an additional stylesheet which replaces the png with a solid background and then uses a IE only filter to reduce the opacity of that div. IE7 beta2 flew through that site and most of the other sites built in the last 15 months or so. Because those sites feed IE6 and below an additional stylesheet by conditional comments and IE7 gets the same style sheets as Firefox, Safari, Opera and everybody else and appears to behave as a good CSS citizen. […]

  2. Erde Says:

    Thanks for this code.

  3. CableGuy Says:

    Handy little code. Thanks

  4. Ottilie Says:

    Thank you very much for the great code. It work very well. Very helpful article.

  5. The Happy Rock Says:

    Thanks a ton. I was pulling my hair out trying to get my conditional comment to work. I finally tried you text file cut and paste, and it worked. Even though the code was exactly the same before. I really don’t understand what happened, but oh well I guess. 2 hours wasted!

    Thanks again

  6. Tim Says:

    Thanks so much from me too, worked out pretty good for me

  7. joern Says:

    very good code!
    thanx

  8. Computer Freak Says:

    Personally, I dont like Conditional Comments. There are enough hacks to make pages work in all browsers, so I had never to use them.

    But nonetheless a nice post and well explained :)

  9. André Says:

    I agree to “Computer Freak” – I mislike the idea of conditional hacks at all… But if there´s no wayto avoid them, this peace of code may solve a problem nicely

  10. Web Mixed Grill » Blog Archive » Opacity vs RGBA - Transparency with CSS Says:

    […] of course is not valid CSS, so use it and ignore the validator or hide it behind conditional comments (up to you, but you get the desired results). Also it looks like the element needs to HasLayout for […]

  11. Sticker Says:

    hi, i tested it its still working and helped me a lot. go on like that.
    greetings tom sticker

  12. Nick Says:

    Thanks a ton. I was pulling my hair out trying to get my conditional comment to work.

Google