Conditional Comments

Thanks to the way older versions of Internet Explorer browsers render particular HTML elements, often it’s not possible to supply the same CSS stylesheet to every browser.

Thankfully, Internet Explorer supports conditional comments, and is the only browser to do so, which allows us to specify special CSS stylesheets for different versions of Internet Explorer, from version 5 upwards.

Conditional comments are structured in the same way as HTML comments, meaning browsers other than Internet Explorer will just treat them as comments, while IE has special code which looks for the conditions’ syntax within comments. They can only be placed in HTML files and are written in the format:

<!--[if expression]> HTML <![endif]-->

Below are a few example conditional comments for different versions of Internet Explorer:

<!--[if IE]>This is Internet Explorer

<![endif]--><!--[if IE 5]>

This is Internet Explorer 5

<![endif]-->

<!--[if gte IE 5.5]>

This is Internet Explorer 5.5 or above

<![endif]-->

<!--[if lt IE 7]>

This is Internet Explorer at a version lower than 7

<![endif]-->

<!--[if (IE 5)|(IE 7)]>

This is Internet Explorer 5 or 7

<![endif]-->

One of the most popular uses for conditional comments is to include a stylesheet specifically for an older version of Internet Explorer. For example:

<!--[if lte IE 6]><link rel="stylesheet" href="/style-ie6.css" type="text/css" />

<![endif]-->

Tags: Conditional Comments, Internet Explorer 6