Conditional Comments

Older versions of Internet Explorer are frequently either inept or naughty. Or both. But they are still popular so we don’t want to ignore them.

Conditional comments, which are nothing more than simple HTML comments that IE (up to version 9) happens to take a peep at, are used to throw a chunk of HTML at these browsers and only these browsers. Other well behaved, top-of-the-class browsers will simply see them as unremarkable comments and move along.

This web site currently uses conditional comments to make a handful of amendments for IE 8 and below, including a small extra stylesheet, and the HTML5 Shiv required for these browsers to take notice of some HTML5 elements. Go ahead – view the source.

They have become a commonly used method of latching extra CSS to a document to plaster over holes in these browsers’ display capabilities. So, for example, you might add something like this inside your head element:

<link href="everything.css" rel="stylesheet">
<!--[if IE]><link href="stupidie.css" rel="stylesheet"><![endif]-->

Everything between <!--[if IE]> and <![endif]--> will be picked up by Internet Explorer. So this will bolt on a CSS file as normal, and then, only if the browser is Internet Explorer (in practice, this will be Internet Explorer version 9 and below), it will also apply an extra CSS file patch.

You can also target specific versions of Internet Explorer:

• <!--[if IE 6>…
• <!--[if IE 7>…
• <!--[if IE 8>…
• <!--[if IE 9>…

You can also target all versions that are greater or less than a certain number:

• eg. <!--[if IE gt 6]>… for IE versions greater than 6
• eg. <!--[if IE gte 8]>… for IE versions greater than or equal to than 8
• eg. <!--[if IE lt 7]>… for IE versions less than 7
• eg. <!--[if IE lte 7]>… for IE versions less than or equal to 7

There are actually more options than this which are largely totally unnecessary. Take a look at Microsoft’s own take on it if you really feel compelled to find out more.

Conditional comments really are horrible. Necessary, often, at the moment, but horrible. Like all hacks, it is best to avoid them wherever possible. They’re not really there for whacking completely different stylesheets in different browsers, for example. It’s more for small fallbacks so that you can use the scrumptious likes of CSS 3 without compromise. And don’t assume you have to accommodate every stone-age version of IE, either – try and figure out what is sensible for you to support. Are your web site visitors likely to be using IE6? Probably not.