Conditional Comments

Internet Explorer does not play nice with CSS, particularly when it comes to widths, borders and padding, as it has its own way of interpreting standards. Thankfully, because of its proprietary implementation of HTML, a feature exists which can allow us to include special style sheets just for IE: conditional comments. Because IE is the only browser to recognise these, you can use an externally referenced style sheet to override CSS attributes that all the other browsers recognise.

The code itself is very simple:


<!--[if IE]>
<style media="all" type="text/css">@import url(ie.css);</style>
<![endif]-->

Now, things get a little tricker when the various versions of IE interpret your web pages differently. Fear not, the comments can be used to distinguish between different versions of IE. The following table details how you can use them:

Comment	Effect
`[if IE 5] [if IE 5.5] [if IE 6] [if IE 7]`	Matches up exactly against one of the specific versions of IE, and ignores all others, even if they are capable of recognising conditional comments.
`[if gt IE 6]`	Matches any version of IE more recent than 6.
`[if gte IE 6]`	Matches any version of IE more recent than 6, including IE 6.
`[if lt IE 6]`	Matches any version of IE older than 6, such as 5.5 or 5.
`[if lte IE 6]`	Matches any version of IE older than 6, including IE 6.

You may notice here that versions of IE previous to 5 do not feature in any of the examples above. This is because conditional comments were only introduced in IE 5. That is usually not a problem, as any users still browsing the web with IE 4 probably deserve to see the resultant mess!

Conditional comments can be used for content other than including external CSS, but to date I've not seen an occasion to do so, nor can I envisage such a one.