TJKDesign: Home Page

ez-css Putting the 'less' in table-less layouts. css-101 logo
Bookmark this article at these sites:

Conditional Comments

One of the most common operations performed in a Web page is to detect the browser type and version. [...]. Conditional comments offer certain advantages over scripted browser detection techniques and are also easier to use.

About Conditional Comments.

I don't agree with the first part of this opening paragraph from the MSDN website, but I think the last bit is true, CC are more reliable than scripted techniques and much easier to use (read this though).

CC have been available since MSIE v5, but were not that much used in their early days. I believe it is CSS that gave them a real chance for prime time. I mean, this thing is a real swiss army knife in the web designer's toolbox. Implementing fixes for MSIE 5 Broken Box Model and MSIE 6 bugs is a snap. They even help to hide some not-so-kosher CSS declarations from the Validator. What else could we ask? Microsoft may have built broken browsers, but we should give them credit for delivering a great tool to fix them :-)

How it works:

Conditional Comments contain inner HTML blocks, there are of two types:

1. Downlevel-hidden conditional comments:
Internet Explorer 5 and later download and render the HTML content inside the comment only if the expression is evaluated as true; other browsers ignore that block altogether.
2. Downlevel-revealed conditional comments:
These CC are the opposite of downlevel-hidden conditional comments, they allow you to serve content to other browsers than MSIE 5+ (Win).

For proper syntax as well as information on Version Vectors, read the MSDN article.

What you should know

  • <!--[if lt IE 5.5]> is not evaluated as true by early MSIE 5 versions (build 5.00.35 for example). To get the proper result, one needs to use <!--[if lt IE 5.5000]>
  • The same goes when testing for MSIE 5.5 versions. It appears to be more reliable to use "5.5000" instead of "5.5" for Version Vector.
  • When it comes to decimal numbers do not use all dots between the digits. For example, to target build "5.00.29" use "5.0029".
  • CC do not work in Mac versions of Internet Explorer (if you have a CSS need to target Internet Explorer on both platforms, then use the star html hack).
  • If you're using multiple versions of Internet Explorer on the same PC, be aware that these versions identify themselves as the most recent version installed. So, unless you've implemented Manfred Staudinger's solution, you'll have to take this into consideration when testing documents that include CC. This means that you'll have to trick the standalone version with a "fake" expression; for example, you'd use "6" instead of "5" and then change it back to "5" once testing is done. For the same reason, you should refrain from giving feedback to people asking for a "site check in IE 5", because your standalone version would not pick up an important HTML block from the markup.
  • Never include a HTML comment inside a Conditional Comment, and there are 2 good reasons for that:
    1. Your document would not validate
    2. It opens the door to non Gecko-based browsers which means that IE Mac, Opera, Safari and others will all render the inner HTML block.

There is a great article by Manfred Staudinger on positioniseverything.net about standalone versions of MSIE.