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
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">
<![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 statement.
In the example above, the enclosed HTML content—a 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 |
<!--[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 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.
Frequently Asked Questions about Internet Explorer Conditional Comments
What are Internet Explorer Conditional Comments?
Internet Explorer Conditional Comments are a proprietary Microsoft technology that allows developers to target specific versions of Internet Explorer with CSS and HTML. They are essentially a way to write code that will only be executed by certain versions of Internet Explorer. This can be useful for dealing with the quirks and inconsistencies that can occur between different versions of the browser.
How do I use Internet Explorer Conditional Comments?
To use Internet Explorer Conditional Comments, you need to wrap your code in a special syntax. This syntax includes an opening and closing comment tag, as well as a conditional statement that specifies which versions of Internet Explorer should execute the code. For example, to target Internet Explorer 6, you would write:
Can I target multiple versions of Internet Explorer with Conditional Comments?
Yes, you can target multiple versions of Internet Explorer with Conditional Comments. You can do this by using the ‘and’ operator in your conditional statement. For example, to target Internet Explorer 6 and 7, you would write:
Are Internet Explorer Conditional Comments still relevant today?
While Internet Explorer Conditional Comments were once a widely used tool for dealing with browser inconsistencies, their relevance has diminished in recent years. This is largely due to the fact that newer versions of Internet Explorer and other modern browsers have become more standards-compliant. However, they can still be useful for maintaining older websites that need to support legacy versions of Internet Explorer.
What are the limitations of Internet Explorer Conditional Comments?
One of the main limitations of Internet Explorer Conditional Comments is that they are not supported by other browsers. This means that any code wrapped in Conditional Comments will be ignored by browsers like Chrome, Firefox, and Safari. Additionally, they are not supported by Internet Explorer 10 and later, which can make them less useful for targeting newer versions of the browser.
Can I use Internet Explorer Conditional Comments in JavaScript?
Yes, you can use Internet Explorer Conditional Comments in JavaScript. This can be useful for writing scripts that need to behave differently depending on the version of Internet Explorer being used. However, keep in mind that any JavaScript code wrapped in Conditional Comments will be ignored by other browsers.
How can I test my Internet Explorer Conditional Comments?
The best way to test your Internet Explorer Conditional Comments is by using the actual versions of Internet Explorer that you are targeting. If this is not possible, you can use tools like BrowserStack or IETester, which allow you to test your website in different versions of Internet Explorer.
Can I use Internet Explorer Conditional Comments to hide CSS from other browsers?
Yes, you can use Internet Explorer Conditional Comments to hide CSS from other browsers. This can be useful for writing CSS that should only be applied in certain versions of Internet Explorer. However, keep in mind that this technique should be used sparingly, as it can lead to more complex and harder to maintain code.
What are some alternatives to Internet Explorer Conditional Comments?
Some alternatives to Internet Explorer Conditional Comments include feature detection, polyfills, and CSS hacks. Feature detection involves testing for the presence of certain features in the browser’s JavaScript environment. Polyfills are scripts that provide support for features that are not natively supported by a browser. CSS hacks are techniques that exploit quirks in a browser’s rendering engine to apply styles selectively.
Are Internet Explorer Conditional Comments considered best practice?
While Internet Explorer Conditional Comments can be a useful tool for dealing with browser inconsistencies, they are generally not considered best practice. This is because they can lead to more complex and harder to maintain code. Instead, it is generally recommended to use techniques like feature detection and progressive enhancement, which can provide a more robust and future-proof solution.
Adam is SitePoint's head of newsletters, who mainly writes Versioning, a daily newsletter covering everything new and interesting in the world of web development. He has a beard and will talk to you about beer and Star Wars, if you let him.