How to…use conditional comments
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!
Anthony says:
Thanks for the article; I will be using for reference, the only thing you didnt mention is the downside to conditional comments and that is that if you wish to stop supporting a particular browser you would have to take the code out of all the HTML pages.
Comment made on February 9, 2007 at 5:36 pm
sophie says:
Thanks for this. You have explained things in a very simple way that is easy to implement.
Comment made on May 14, 2007 at 9:21 pm
Joe Tapia says:
Could you use a conditional comment to make a css image invisible in Firefox. Added css image is invisible in IE but shows up in FF. Purpose of added css to make the page retain formatting when printing. Or would this be more suited to a hack?
Comment made on October 3, 2007 at 8:22 pm
Jay Bee says:
I know you have a newer article on conditional statements, and you use them here. Though if you’re using conditional statements, why would you ever use a hack for IE? Not that its bad or good (well, actually, hacks are bad imho), but once you start using the conditional, its probably a better idea to stay consistent. Not to mention the CSS is much nicer to deal with (and easier to troubleshoot) when you create separate stylesheets for each conditional. Just a thought. Good article.
Comment made on October 11, 2007 at 4:09 pm
AC says:
How do you write the conditional comment for firefox???
Comment made on April 14, 2008 at 10:05 pm
Tetsuo says:
@AC: Conditional comments are for targeting Microsoft browers only.
Comment made on June 3, 2008 at 9:46 am