IE Conditional Comments

Overview

IE Conditional Comments (or condcom for short) are special comments that enable authors to use the instructions that only Internet Explorer 5.0 and above on Windows platform will see.

Regular comment:

<!--This is a comment-->

IE conditional comment:

<!--[if expression]> <![endif]-->

Reversed anti-IE comment:

<!--[if !IE]>--> <!--<![endif]-->

Reversed IE conditional comment:

<!--[if !condition]>
	<![IGNORE[--><![IGNORE[]]>
		HTML 
<!--<![endif]-->

Let's take a look at the elements of the IE conditional comments and then I will show some examples.

Item Syntax Description
feature IE String. The only currently supported feature is the string "IE", corresponding to Internet Explorer.
version number An integer or floating point numeral, corresponding to the version of the browser
operator ! The NOT operator. This is placed immediately in front of an value or expression or feature and reverses the Boolean value of the operand.
comparison feature Returns a Boolean value of true if the feature matches the browser type.
comparison feature version Returns a Boolean value of true if the feature matches the browser type and the version number matches the browser version.
comparison lt The less-than operator. Compares values or expresssions. Returns a Boolean value of true if the first argument is less than the second argument.
comparison lte The less-than or equal to operator. Compares values or expresssions. Returns a Boolean value of true if the first argument is less than or equal to the second argument.
comparison gt The greater-than operator. Compares values or expresssions. Returns a Boolean value of true if the first argument is greater than the second argument.
comparison gte The greater-than or equal to operator. Compares values or expresssions. Returns a Boolean value of true if the first argument is greater than or equal to the second argument.

Basically, any browser except for Internet Explorer on a Windows platform will treat IE conditional comment as a regular comment. IE conditional comments may be very useful for hiding or revealing the code to IE, which in turn allows authors to use CSS "hacks" in a more appropriate fashion, thus being able to validate a certain page that uses those IE specific hacks.

Let's look over the following examples.

Example 1

<!--[if IE]><![endif]-->

As you can see this is pretty much a regular HTML comment. Any browser well see the blue part as a comment and thus disregard it. However, Internet Explorer will see the part [if IE]> which will tell it to parse the code following this part until it sees <![endif]. Therefore, the following code will produce an empty page for any browser except for IE.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
	"http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head><title>Test page</title></head>
 <body>
	<!--[if IE]>You are using Internet Explorer, 
		bad choice I'd say!<![endif]-->
 </body>
</html>

In IE this code will display text "You are using Internet Explorer, bad choice I'd say!"

I have noted in a previous paragraph that IE conditional comments are useful for including IE specific CSS hacks, let's look at the next example.

Example 2

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
	"http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head><title>Test page</title>
		/* WRONG */
		<style type="text/css">
			<!--[if IE]>
				body{background: black;}
			<![endif]-->
		</style>
		/ * RIGHT */
		<!--[if IE]>
		<style type="text/css">
			body{background: black;}
		</style>
		<![endif]-->
	</head>
<body>
</body>
</html>

This example demonstrates wrong (red) and correct (blue) examples of using IE conditional comments for including embeded styles. The red colored example is wrong because IE conditional comments are based on a regular HTML comment which looks like this: <!-- This is a comment -->. In CSS comments are written as /* This is a comment */ and therefore IE conditional comment is ignored. However, the blue colored example is perfectly correct, and yes we can have several <style> tags.

In practice it is often useful to create a separate style sheet with IE specific instructions, the following example demonstates a way to inlude those files using IE condcom.

Example 3

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
	"http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head><title>Test page</title>
		<link rel="stylesheet" type="text/css" href="all_of_my_css_code.css">
		<!--[if IE]>
			<link rel="stylesheet" type="text/css" href="ie_hacks.css">
		<![endif]-->
	</head>
<body>
</body>
</html>

The CSS file "ie_hacks.css" will be included only if the veiwer of the page is using any version of Internet Explorer. Make sure to include IE specific files containing IE hacks after all of your regular CSS files for the styles to collapse correctly.

Version number

There is more control in IE condcoms, you may also specify the version of the browser, next example demonstates that.

Example 4

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
	 "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head><title>Test page</title></head>
 <body>
	<!--[if IE 5]>
		You are using Internet Explorer 5.X
	<![endif]-->
 </body>
</html>

All browsers except for IE 5 will see a blank page in this case. It is important to note that text "You are using Internet Explorer 5.X" will also be visible in IE 5.5, the reason for that is because we did not specify the decimal point of the version number and therefore this condcom will be true for any IE version that has 5 as it's major digit in the version number. If we wanted a condcom to apply to only IE version 5, we would write the conditional comment like this:

<!--[if IE 5.0]>
	You are using Internet Explorer 5.0
<![endif]-->

Comparison operators

Comparison operators allow us to make IE conditional comments even more flexible. We can prefix the IE with lt (less than), lte (less than or equal to), gt (greater than), gte (greater than or equal to) to modify the meaning of the condcom expression.

Example 5

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
	"http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head><title>Test page</title></head>
 <body>
	<!--[if lt IE 6]>
		You are using Internet Explorer 5.X
	<![endif]-->
	<!--[if gte IE 6]>
		You are using Internet Explorer 6 or above
	<![endif]-->
 </body>
</html>

When this example is veiwed in IE with version number less than 6 the text "You are using Internet Explorer 5.X" will be visible and text "You are using Internet Explorer 6 or above" will be hidden. Keep in mind that IE below 5.0 does not support conditional comments and according to MicroSoft's documentation no text from the example above will be visible. I do not possess such IE version and therefore cannot verify that statement. In turn, if the example above would to be veiwed in IE version 6 and above only the text "You are using Internet Explorer 6 or above" would be visible.

Reversed Anti-IE Comment

By "reversed" I mean that this type of condcom will hide the code from IE and reveal it to any other. The MicroSoft's documentation considers IE to be the only browser in this world and writes a reversed conditional comment as <![if !IE]> <![endif]>. However, it is an invalid code and should be avoided by any sane web developer. Instead consider the following valid workarounds.

Example 6

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
	"http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head><title>Test page</title></head>
<body>
	<!--[if !IE]>-->
		You are using a good browser
	<!--<![endif]-->
</body>
</html>

The text "You are using a good browser" will be visible in any browser other than IE. In the condition statement we have used an exclamation mark (!) to reverse the boolean value of the operand. This version of the reversed condcom is not so much different from the invalid MicroSoft's version but it does validate perfectly and works just as good.

Important note: Keep in mind that with this version of the reversed condcom any modificators, such as version number and comparison operators (greater-than, less-than, etc.) will either not work or will print "-->" on the page, if you need to use those consider a solution below.

Reversed IE Coditional Comments

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
	"http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head><title>Test page</title></head>
<body>
	<!--[if !gt IE 6]><![IGNORE[--><![IGNORE[]]>
		Some will see and some will not!
	<!--<![endif]-->
</body>
</html>

The code above will hide the code in the conditional comment from any IE version above 6. The easy way to remember this is to take a look at the expression in the if part without the NOT operator. In the example above it is gt IE 6, which means that the code in the conditional comment will be hidden from IE versions greater than IE version 6

Thanks to David Hammond (WebDevout) for explaining me the way all this works. I don't think it is neceserry to explain it to you myself (or maybe I am just too lazy). If you wish to know the way it works you can read the log of this conversation.

Suggested reading

Sources

Comments