Internet Explorer Conditional Comments

Conditional comments comprise a proprietary Microsoft extension to Internet Explorer that provides a mechanism to target each of the versions of IE either specifically, or as a group. This extension was introduced in IE5, so it can only be used in documents rendered in browsers from IE5 up on the Windows platform.

Conditional comments use a special syntax—HTML markup wrapped in a conditional statement—and are placed within an HTML comment. If the statement evaluates to true, the enclosed HTML is revealed within the HTML document. If the statement evaluates to false, the enclosed HTML remains hidden. Because conditional comments are placed with HTML comments, the enclosed HTML also remains hidden from all browsers that don’t support conditional comments.

Conditional comments can be placed at any point in the document at which normal comments can be located. As such, you can’t place them in external CSS files, or in between <style> tags. However, they can be used to link to specific files, or to provide specific HTML (or CSS) content for the IE versions specified within the conditional statement. It may seem odd to discuss HTML markup in a CSS reference, but conditional comments are Microsoft’s recommended mechanism for delivering targeted CSS to its browser.

Conditional Comment Basics

The basic form of conditional comments is as follows:

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

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 Table 1.

Table 1. Conditional Comment Operators
Operator Description
IE represents Internet Explorer; if a number value is also specified, it represents a version vector
lt less than operator
lte less than or equal to
gt greater than
gte greater than or equal to
! the NOT operator
() subexpression operator
& the AND operator
| the OR operator
true evaluates to true
false evaluates to false

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>

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>

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>

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>
Tip: Targeting Point Releases

If you want to target a specific point release, you’ll need to specify the correct version vector. You can specify a point release using a number followed by up to four decimal places. Even though this appears as a decimal number, IE doesn’t see it that way: each individual digit is compared separately. For example, the expression [if IE 5] will have a broader match than [if IE 5.0], even though they appear to be equal decimal number values. The expression [if IE 5.0] will not match IE5.5.

What this means is that you may need to check the version vector if you’re aiming to target specific browser versions. For example, Microsoft points out that IE5 on the Windows 2000 platform has a version vector equal to 5.0002. This means that the expression [if IE lte 5.0000] would fail to target the release build of IE5.

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>

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>

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>

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>

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>

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>

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">
<!--[if IE 6]>
<link href="ie6.css" rel="stylesheet" type="text/css">
<!--[if IE 5]>
<link href="ie5.css" rel="stylesheet" type="text/css">

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.

User-contributed notes

by Louis Lazaris
Mon, 04 Oct 2010 19:08:52 GMT

@Paul O'B:

Thanks for the answer, and for the links. Although those links do answer the questions about the UA string and scripting, they don't really explain the actual mechanism used to determine the current browser.

I guess since the UA string and scripting are out of the equation, then it's something internal in the browser. Just seems odd that there's no actual explanation of the manner used by the comment to get the browser version.

by Paul O'B
Tue, 24 Aug 2010 19:29:39 GMT

@Louisstar: No they don't get the version from the UA string and scripting doesn't need to be enabled for them to work.

You can find a good run-down of how they work at the following links.

by Louis Lazaris
Mon, 16 Aug 2010 22:15:49 GMT

It would be nice to get some information on where the conditional comments get the browser version from. Are they reading the User Agent string, like PHP would do? Or is it some other means it's using?

So, although the article states it's "safe", if it is looking at the UA string, then it's not really fool-proof. The MSDN page on this subject doesn't seem to have an explanation as to how exactly the browser version is read by the conditional comment.

by XLCowBoy
Sun, 07 Dec 2008 18:30:54 GMT

You can also minimize the number of stylesheets if you use the conditional comments to create IE-specific containers, like so:

<!--[if IE 7]>--><div id="IE7"><!--<![endif]-->
<!--[if IE 6]>--><div id="IE6"><!--<![endif]-->

<p>regular html content</p>

<!--[if IE 7]>--></div><!--<![endif]-->

You could then target the <p> element by:

p {/* code for standard browsers*/}
div#IE6 p {/* code for IE6 */}
div#IE7 p {/* code for IE7 */}

by amessinger
Tue, 08 Apr 2008 21:07:49 GMT

You can also nest conditional comments. This provides an alternate (and arguably more intuitive) approach to valid downlevel-revealed CCs that also target IE. Instead of this:

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

You can do this:

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

For more on this approach, see the last few sections of this Position Is Everything article:

Related Products