Goodbye hacks.
Hello conditional comments.

Since adopting a standards based approach to web design, I have wasted numerous development hours struggling with inconsistencies in the way web browsers implement the CSS spec. Sure, you can use CSS hacks to serve different CSS rules to different browsers, based on their own quirky interpretation of CSS, but that is a dangerous path to tread.

Future browser releases (such as the imminent stable release of IE7) may fix a historically buggy CSS implementation, thereby causing your page to break.

Thankfully there is an elegant solution that allows you to serve alternative CSS rules to different web browsers, without the need for ugly hacks or unreliable browser sniffing. Meet my new best friend – Conditional Comments.

Conditional comments are a Microsoft innovation that allows the browser to parse and render the content of specially formatted HTML comments. You can target all versions of IE, specify a major and/or minor version to target, or even target releases older or newer than a particular version. All other browsers will treat the conditional comment as a standard HTML comment and ignore it.

Here is the basic syntax for a conditional comment:

<!--[if IE 5]>
<p>You are using Internet Explorer 5</p>
<![endif]-->

Simple, huh? There’s a complete description of the conditional comment syntax over at the MSDN website.

Although conditional comments were introduced in Internet Explorer 5, for some reason CSS hacks have reigned supreme until recently. Thankfully those days are over. Using conditional comments it is easy to serve an alternative stylesheet to Internet Explorer, containing all of the CSS rules required to ensure your page renders as expected in IE. All other browsers will safely ignore the new stylesheet.

Using conditional comments to banish hacks

Here’s a real-world illustration of how to use conditional comments to serve up IE-specific styles, taking the CSS min-height property as an example.

As it’s name suggests, the min-height property specifies a minimum height for an element. One scenario where this could be very handy is defining a background image for the blockquote element. Imagine that our background graphic is 35px high – what happens if our blockquote only has one line of text in it? The background image will get chopped off, that’s what:

But here comes min-height to the rescue, forcing our blockquote to be at least 35 pixels high, thereby ensuring it is high enough to contain the background graphic.

The css:

blockquote {
padding: 0 0 0 37px;
background: url(images/quotes.gif) no-repeat;
min-height: 35px;
}

The result:

But wait, there’s trouble in paradise… After firing up Internet Explorer it seems that nothing has changed – our blockquote is still only as high as the text it contains, and our beautiful quotation marks are still getting the chop. That’s because IE doesn’t recognize the min-height property.

Fortunately we can fix things in IE by specifying the CSS rule “height: 50px” – IE treats the CSS height property exactly the same way as other browsers treat min-height. But that will screw up our blockquotes in other browsers, setting their height on the page to always be 50px and never any higher, irrespective on the length of our blockquote text.

What we need to do is specify one CSS rule for IE (height: 50px) and one for other browsers (min-height: 50px). Historically, we would have used a nasty CSS hack to achieve this task, but using conditional comments we have an elegant solution at hand.

We firstly specify our generic stylesheet, then using conditional comments serve a second stylesheet to Internet Explorer, and only Internet Explorer:

<link rel="stylesheet" href="styles.css" type="text/css" media="screen" />
<!--[if IE]>
<link rel="stylesheet" href="styles_ie.css" type="text/css" media="screen" />
<![endif]-->

Here are the contents of styles.css:

blockquote {
padding: 0 0 0 37px;
background: url(images/quotes.gif) no-repeat;
min-height: 35px;
}

And here are the contents of styles_ie.css, our IE-only stylesheet:

blockquote {
height: 35px;
}

We have now specified a CSS rule for Internet Explorer that will be safely ignored by all other web browsers, without a hack in sight!