Conditional comments have been part of internet explorer since version 5, but a lot of programmers ignore them.

This article teaches the basics of using conditional comments, and shows some examples of their uses.

A conditional comment is a method of talking directly to a version of internet explorer above version 5, allowing you to pass
IE specific rules without affecting other browsers such as firefox.

By utilizing conditional comments you can effectively reduce the usage of css hacks to make your web pages compatible with
Internet explorer.

Common uses

With conditional comments you can:

• Target IE specifically
• Make IE 5+ ignore a block of code

A great usage, for example, would be using conditional comments with CSS style sheets so you can have certain IE specific css rules that you want other browsers to ignore.

The code

You may be aware that, in html, the syntax of a normal comment is:

1

<!--comment goes here-->

Comments can be placed anywhere in the document.

Now, a conditional comment looks like this:

1

<![if ]><![endif]>

Conditional comments can also be placed anywhere in your HTML document.

Types of conditional comment

downlevel-hidden

A downlevel-hidden comment is a comment that is visible only to the IE version you are targeting.

Example:

1
2
3

<!--[if IE]>
     <em>your code</em>
<![endif]-->

The above code will only be seen by IE versions 5 and up.

Other, older, versions of IE, and also other browsers, will not see the code enclosed by the tags, and will therefore ignore anything you put inside, hence the name, downlevel-hidden.

The other browsers just see the <– and –&rt parts, so it looks like a regular comment to them.

Just to show you, for reference, if you used the code,

1
2
3

<!--[if !IE]>
     <em>your code</em>
<![endif]-->

NO browser would see the code. This is because the rule is !IE, which means NOT IE. Therefore IE 5+ wont see the code, and since it is downlevel hidden, no other browsers will either.

Visibility conclusion:

Firefox/non-ie browsers - code hidden

Targeted IE - code visible

downlevel-revealed

A downlevel-revealed comment is a comment that is visible to the IE version you are targetting, and also non-IE browsers and old versions of IE. It is useful when you wish to make code invisible to a version of internet explorer, but you want non-IE browsers to still see it.

Example:

1
2
3

<![if !IE]>
     <em>your code</em>
<![endif]>

The above example would be visible to all browsers except IE versions 5+.

Validity

You may notice that the downlevel-revealed code provided by Microsoft does not validate correctly, the correct code is outlined on this page, or is shown below:

1
2
3

<!--[if !IE]>-->
     <em>your code</em>
<!--<![endif]-->

The difference between this downlevel-revealed code and the downlevel-hidden code is that the comment is closed after each line, so non-IE browsers will not ignore it.

Visibility conclusion:

Firefox/non-ie browsers - code visible

Targeted IE - code visible

Targeting specific IE versions and extra commands

The [if ] portion of the conditional comment code has extra functionality so you can target certain versions of IE, or exclude versions. These are outlined below.

Targeting an IE version

To target a specific version of IE you just add the version number in the if statement, for example, to target IE 6 only you could use:

1
2
3

<!--[if IE 6]>
     <em>your code</em>
<![endif]-->

You must leave a space between ‘IE’ and the version number.

Targeting multiple IE versions

If, for example, you wanted to target versions of IE older than IE 6, rather than writing individual statements for each version you could use the ‘less than’ comparison :

1
2
3

<!--[if lt IE 6]>
     <em>your code for versions less than IE 6, but not including IE 6</em>
<![endif]-->

If you wanted to target versions older than, and equal to IE6 you would use:

1
2
3

<!--[if lte IE 6]>
     <em>your code</em>
<![endif]-->

The commands for comparing versions are as follows:

lt - less than

lte - less than or equal too

gt - greater than

gte - greater than or equal too

Excluding an IE version/versions

To exclude a version you can make use of the ! (NOT) operator, for example, to target all IE versions except IE 6 you could use:

1
2
3

<!--[if !IE 6]>
     <em>your code</em>
<![endif]-->

This would mean if not ie 6.

You could also mix the not operator with multiple IE versions, for example to target all versions of IE except IE 6 and above you could use the code:

1
2
3

<!--[if gte !IE 6]>
     <em>your code</em>
<![endif]-->

This would mean if not greater than or equal to ie 6.

Version Vectors

Version vectors allow you to target minor versions of IE, for example you could target IE 5.5 instead of IE 5 as a whole. This is particularly useful, as some bugs are fixed in higher versions. The format of a version vector is x.xxxx, but you do not have to make the decimal 4 digits long, e.g 5.0 is valid, as is 5.0000, however the 5.0000 targets the 0000 build of the browser specifically.

Usage examples

Some of the best example of usage would be using conditional comments in conjunction with CSS. Say for instance you wanted to fix a box model error in IE 5, rather than use hacks you could just make a separate style sheet for IE 5 with modified width values of an element which wasn’t rendering correctly. You would then add the following to the header of the html page:

1
2
3
4
5

<!--[if IE 5]>
  <style type="text/css">
    @import url(ie5.css);
  </style>
<![endif]-->

And hey presto, IE 5 will use the fixed styling, no box model hacks needed. Of course with this method you would have to ensure the conditional comment was after the style sheet include, if not the style would be overwritten by the default style sheet. Of course another method that would not be affected by the order would be to just add the styling directly to the conditional comment :

1
2
3
4
5

<!--[if IE 5]>
  <style type="text/css">
    #element{width:200px;}
  </style>
<![endif]-->

Since styles in the document have a higher priority than those in the style sheets, it would take priority.

So there you have it, a simple guide to using conditional comments in your web pages to avoid hacks, I hope this was useful and don’t forget to post a comment. Thanks for reading!

Further reading

Microsofts conditional comments page

Found this post useful? Why not buy me a coffee!

Related Entries

• My day of buggy hell with IE - a css story
• Window Resize/Mobile Browser Background Bugs
• Going elastic with ems, layout techniques
• Using Image replacement techniques
• IE8 has change of heart

Popular Entries

• Anti-aliased Rounded corners with JQuery
• JQuery Curvy Corners Update (v1.1.1)
• The great wordpress plugin update extravaganza of the year
• Book Review - Learning jQuery
• Back with a New look