Conditional Comment Basics

The basic form of conditional comments is as follows:

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

The conditional statement is contained within square brackets, and begins with if followed by an expression. The enclosed HTML content is delimited by the opening <!--[if …]> and a closing <![endif]--> statement.

In the example above, the enclosed HTML content—a <link> tag—will be revealed to all IE browsers that support conditional comments. It links to a style sheet that only IE will see. All browsers other than IE versions 5 and later will see the code above as one simple HTML comment. If we remove the brackets and text for the sake of clarity, we’re basically left with a normal comment structure as follows:

<!--
  <link href="iecss.css" rel="stylesheet" type="text/css" >
-->

Conditional Comment Operators

As we mentioned already, we can use conditional comments to apply CSS rules to specific IE browser versions with the help of comparison operators that allow each version of IE to be targeted precisely. We can write complex expressions using one or more of the operators listed in Conditional Comment Operators.

So, for example, you’d use the following markup to target IE version 7:

<!--[if IE 7 ]>
  <p>Only IE 7 will see this</p>
<![endif]-->

Alternatively, if you wanted to target all IE browsers except IE7 and above (that is, versions prior to IE7), you could use this method:

<!--[if lt IE 7 ]>
  <p>Only less than IE 7 will see this</p>
<![endif]-->

If you wanted to include IE7 in that list, you’d use lte operator, which selects all version numbers that are less than or equal to 7.

The gt (greater than) and gte (greater than or equal to) operators work similarly. Have a look at this example:

<!--[if gte IE 6 ]>
 <p>Only  IE 6 and greater will see this</p>
<![endif]-->

This conditional comment will select all IE browsers with version numbers greater than or equal to 6, which will obviously include IE7 and even IE8—if it ever makes an appearance!

It should be noted that when you use a single digit to represent the version of IE you want to target (for example, [if IE 7]) that directive will be applied to all versions of that browser including those with version vectors. For example, if you used the conditional comment below, you’d be including all versions of IE5 including IE5.5:

<!--[if IE 5]>
 <p>This covers all versions of IE5 including IE5.5</p>
<![endif]-->

You can also use the “not” operator, !, to exclude one of the IE browser versions. To exclude IE6, but not IE7 or IE5 (if ever you wanted to do such a thing), you’d use this expression:

<!--[if !IE 6]>
  <p>IE7 or IE5 only</p>
<![endif]-->

Downlevel-hidden Conditional Comments

More complicated expressions can be created using one or more of the available operators. For example, the following conditional comment targets IE6 and IE7 using subexpressions and the OR operator:

<!--[if (IE 6)|(IE 7)]>
  <p>IE6 or IE7 only </p>
<![endif]-->

Microsoft refers to the this style of conditional comments as downlevel-hidden, since browsers that don’t support conditional comments (including IE4 and earlier) will interpret the conditional comment code as a standard HTML comment, and ignore it completely. And yes—Microsoft describes all browsers except IE5 and later as “downlevel” browsers!

There is, however, another version of conditional comments that will allow these downlevel browsers to be targeted; they’re called downlevel-revealed conditional comments.

Downlevel-revealed Conditional Comments

In downlevel-revealed conditional comments, the HTML content inside the conditional statements is revealed to browsers that don’t support conditional comments, because the conditional statements—and only the conditional statements—are ignored. If the statement evaluates to true (in a supporting browser), the content inside the conditional statements is also revealed.

Unfortunately, the syntax of these downlevel-revealed conditional comments will often cause HTML validation errors. Here’s Microsoft’s suggested syntax:

<![if !IE]>
 <p>This is shown in downlevel browsers, but is invalid HTML!</p>
<![endif]>

However, a better, valid version of the syntax is available. It’s been discovered that if you change the syntax slightly, the downlevel effect can be maintained and the HTML code will validate:

<!--[if !IE]>-->
  <p>This is shown in downlevel browsers.</p>
<!--<![endif]-->

Here, we simply wrap the conditional statements in HTML comments. It should be noted that this usage doesn’t conform to Microsoft’s specifications for these comments, but it presently works in all versions of IE5 and later (including IE7) and, more to the point, will also validate—unlike Microsoft’s version.

That said, a problem exists with that approach should you wish to target downlevel browsers as well as a supporting Microsoft browser version. Take a look at this example, which attempts to target downlevel browsers and IE7 or later:

<!--[if gte IE 7]>-->
  <p>This is shown in downlevel browsers and IE7 or later.</p>
<!--<![endif]-->

This example uses valid HTML, but IE7 and later browsers will also reveal the --> after the opening conditional statement. The fix suggested by Microsoft is to add an extra <! just after the opening conditional comment:

<!--[if gte IE 7]><!-->
  <p>This is shown in downlevel browsers and IE7 or later.</p>
<!--<![endif]-->

Conditional Comments in Practice

If you want to use conditional comments in your approach to delivering targeted CSS, here’s what you can do. First, link to your standard style sheet in the normal way (via a <link> tag, for example). Then, use conditional comments to link to one or more other style sheets that contain the CSS targeted towards IE. The IE-only style sheets should contain only the required CSS fixes. They shouldn’t be a duplication of your standard style sheet—that would be a waste of bandwidth and completely redundant anyway. Here’s an example of this approach:

<link href="main.css" rel="stylesheet" type="text/css">
<!--[if IE 7]>
<link href="ie7.css" rel="stylesheet" type="text/css">
<![endif]-->
<!--[if IE 6]>
<link href="ie6.css" rel="stylesheet" type="text/css">
<![endif]-->
<!--[if IE 5]>
<link href="ie5.css" rel="stylesheet" type="text/css">
<![endif]-->

main.css is the standard style sheet, while ie7.css, ie6.css, and ie5.css contain the CSS for specific IE versions. You may not need to be as version-specific as we’ve been in this example. Remember that the cascade will be in effect, and that the rules in the CSS files that are referenced lower down the page source will overrule any previously defined CSS rules.

Whether you like conditional comments or not, they do make it easy and safe to target versions of IE, and they’re as future-proof as any of these tricks can be. The comments also provide a logical structure to your CSS management approach, and separate the targeted CSS from the standard CSS. At some time in the future when the targeted CSS is no longer required, the code, which is already separated, can easily be removed.