What are conditional comments?
Conditional comments are a simple Internet-Explorer-only feature that Microsoft added to IE5 Windows and later. (Mac IE doesn’t support them.) They provide an easy way to detect that the visitor is using an IE browser (and which version they’re using). You can then serve IE users different blocks of HTML as required.
Conditional comments vs. CSS hacks
Conditional comments are most commonly used to serve additional IE-only CSS styles to IE browsers, often to work around bugs or inconsistencies in these browsers’ CSS implementations, while serving a standard style sheet to all other browsers. This means you can work around those pesky IE CSS bugs without having to resort to horrible hacks. (The traditional method is to use a hack that exploits another IE bug to trick only IE browsers into reading your workaround. The phrase “two wrongs don’t make a right” springs to mind!)
Conditional comments are coming into their own with IE7. Although IE7 still has some of the CSS rendering bugs of IE6, it has fixed some of the bugs that previous IE6 hacks have exploited. This means that some sites that relied on IE6 hacks to serve different CSS to IE6 are now breaking with IE7.
The reverse is also happening: IE7 has fixed a lot of IE6’s CSS rendering bugs, but is still susceptible to some IE6 hacks. For example, take IE6’s lack of min-height support (now fixed in IE7). A site that works around this IE6 bug by serving special “IE6-only” CSS to IE6 using an IE6-specific hack may also end up serving the same IE6-only CSS to IE7, because IE7 is susceptible to the same hack technique. But unlike IE6, IE7 renders the “IE6-only” CSS correctly, according to the CSS standards. Result: a broken page in IE7. Still with me? What a mess!
Conditional comments provide a sane way out of this mess by allowing you to accurately determine the exact version of IE that they user is running, without needing hacks that might break in future.
How to create a conditional comment
There are two types of conditional comment: downlevel-hidden and downlevel-revealed. Downlevel-hidden comments hide HTML from non-IE browsers; downlevel-revealed comments don’t. We’ll concentrate on downlevel-hidden comments here, as they’re more useful for our purposes.
The basic syntax of a downlevel-hidden conditional comment is:
<!--[if condition]>
(HTML to use if condition is true)
<![endif]-->
If condition evaluates to true, and an IE browser is being used, the HTML between the if and endif lines is included. If condition evaluates to false, or a non-IE browser is being used, the HTML between the if and endif lines will be skipped.
condition can contain a number of different operators, values and other stuff. For example:
<!--[if IE 5]>
<p>This message is only displayed in IE5.</p>
<![endif]-->
<!--[if !IE 5]>
<p>This message is only displayed in browsers other than IE5.</p>
<![endif]-->
<!--[if lt IE 7]>
<p>This message is only displayed in browsers earlier than IE7.</p>
<![endif]-->
<!--[if gte IE 6]>
<p>This message is only displayed in IE6 and greater.</p>
<![endif]-->
Example: Displaying an additional style sheet for IE6 and earlier
Here’s a practical example. Say you’ve built your nice shiny website and used the CSS2 min-height property to ensure that a certain DIV in the page is always at least a certain height (but can stretch beyond that height if it contains enough content). Your XHTML page might look something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="stretchy-div">
<p>This is my DIV with a min-height of 300 pixels.</p>
</div>
</body>
</html>
…and the style.css file that’s linked to in the above page might contain the following style:
#stretchy-div
{
width: 500px;
min-height: 300px;
}
All good stuff, except it won’t work in IE6 or earlier, because these browsers don’t recognise min-height! However, IE6 and earlier actually treat the height property like min-height. So we can work around the problem by serving the height property to IE6 and earlier, and min-height to everything else, including IE7.
First, we create a separate style sheet, style_ie6.css, that gives IE6 and earlier a height for #stretchy-div:
#stretchy-div
{
height: 300px;
}
Then, we use a conditional comment to serve this style sheet to IE6 and earlier, after our existing style sheet:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="style_ie6.css" />
<![endif]-->
</head>
<body>
<div id="stretchy-div">
<p>This is my DIV with a min-height of 300 pixels.</p>
</div>
</body>
</html>
IE5 and IE6 will load both style sheets and see both the min-height and height properties (and ignore min-height as they don’t understand it), while all other browsers will load only style.css and therefore just see min-height. So the end result is min-height-like behaviour across all modern browsers.
Neat, huh? And we didn’t need to use a single line of server-side code, JavaScript, or CSS hackery to achieve it!
More info on conditional comments
Although the above example is one of the most common practical uses of conditional comments, there’s quite a bit more to this feature than we’ve covered here. You can read a more detailed overview on Microsoft’s site, which includes stuff on downlevel-revealed comments and shows how to distinguish between point versions, or so-called “version vectors” – for example, IE5 and IE5.5.
Leave a Reply