Conditional comments

Explorer 5+ Windows only.

If you have multiple Explorers installed the conditional comments will view each install as the highest installed version (usually IE 6).

I have heard, but not tested, that a single install of IE 5.0 does not allow you to use numbers in the conditional comments.

Conditional comments only work in Explorer on Windows, and are thus excellently suited to give special instructions meant only for Explorer on Windows. They are supported from Explorer 5 onwards, and it is even possible to distinguish between 5.0, 5.5 and 6.0.

I myself use conditional comments in the top frame. If you view its source you'll see

<!--[if IE]>
<style>
div.logo {
	margin-left: 10px;
}
</style>
<![endif]-->

Normally the div.logo has a left margin of 22px. However, Explorer Windows is buggy when it comes to margins of floated elements: it doubles them. Therefore I wanted to tell Explorer Windows to use a 10px margin instead. The conditional comment does so.

This code example summarizes how you can use conditional comments, and how you cannot use them.

  1. Their basic structure is the same as an HTML comment (<!-- -->). Therefore all other browsers will see them as normal comments and will ignore them entirely.
  2. Explorer Windows, though, has been programmed to recognize the special <!--[if IE]> syntax, resolves the if and parses the content of the conditional comment as if it were normal page content.
  3. Since conditional comments use the HTML comment structure, they can only be included in HTML files, and not in CSS files.
    I'd have preferred to put the special style in logo.css, which holds all other styles for the top frame. Unfortunately that turned out to be impossible. I could also have put an entire new <link> tag in the conditional comment referring to an extra style sheet, but since I needed only one extra rule it would complicate matters too much. If you need a lot of extra styles for Explorer Windows, though, the extra <link> tag is probably the best way to go.

Example

Below I added a lot of conditional comments that print out messages according to your Internet Explorer version.

Note however, that if you use multiple Explorers on one computer, the conditional comments will render as if all these Explorer versions are the highest Explorer version available on your machine (usually Explorer 6.0).

The syntax I use is:

<!--[if IE]>
According to the conditional comment this is Internet Explorer<br>
<![endif]-->
<!--[if IE 5]>
According to the conditional comment this is Internet Explorer 5<br>
<![endif]-->
<!--[if IE 5.0]>
According to the conditional comment this is Internet Explorer 5.0<br>
<![endif]-->
<!--[if IE 5.5]>
According to the conditional comment this is Internet Explorer 5.5<br>
<![endif]-->
<!--[if IE 6]>
According to the conditional comment this is Internet Explorer 6<br>
<![endif]-->
<!--[if gte IE 5]>
According to the conditional comment this is Internet Explorer 5 and up<br>
<![endif]-->
<!--[if lt IE 6]>
According to the conditional comment this is Internet Explorer lower than 6<br>
<![endif]-->
<!--[if lte IE 5.5]>
According to the conditional comment this is Internet Explorer lower or equal to 5.5<br>
<![endif]-->

Note the special syntax:

CSS hack?

Are conditional comments CSS hacks? Strictly speaking, yes, since they can serve to give special style instructions to some browsers. However, they do not rely on one browser bug to solve another one, as all true CSS hacks do. Besides, they can be used for more than CSS hacks only (though that rarely happens).

Since conditional comments are not based on a browser hack but on a deliberate feature I believe they are safe to use. Sure, other browsers could implement conditional comments, too (though as yet none have done so), but they're unlikely to react to the specific query <!--[if IE]>.

I use conditional comments, though sparingly. First I see if I can find a real CSS solution to an Explorer Windows problem. If I can't, though, I don't hesitate to use them.