Conditional Comments
What are Conditional Comments?
Conditional Comments have been around since Internet Explorer 5 and have been built into every IE browser since then. They simply let you determine which version of IE the user is using and lets you add something to a targeted IE version. This could be anything from an additional bit of coding such as an extra stylesheet to a little bit of text that you want someone to read should they be using a certain version of Internet Explorer.
How do they work?
They work simply by adding a bit of code into a normal html comment, so while IE has been programmed to read these, other browsers simply read them as a comment and ignore what is inside them.
By specifying a version of IE you can target certain browsers, as what happens is if IE reads the conditional comment to be true it will display it, but if it reads it to be false it will remain hidden within the comment.
Some Examples:
<!--[if IE 5 ]> Only IE 5 will see this <![endif]-->
<!--[if lt IE 8 ]> If the IE browser is less than 8 this will be used <![endif]-->
<!--[if gte IE 7 ]> If the IE browser is 7 or above this will be used <![endif]-->
<!--[if lte IE 6 ]> If the IE browser is 6 or lower this will be used <![endif]-->
<!--[if (gte IE 6)&(lt IE 8)] > If the IE browser is greater or equal to 6 but less than 8 this will be used. <![endif]-->
<!--[if (IE 5)|(IE 7)] > If the IE browser is either 5 or 7 this will be used. <![endif]-->
Excluding IE but not other browsers
While it isn’t possible to create conditional comments for non-IE browsers using this method, it is possible to exclude IE from using part of the code. The way to do this is with the following conditional comment:
<!--[if !IE]>--> Tells IE to ignore what is in here, but other browsers will use it <!--<![endif]-->
Now hopefully you have noticed that this one is slightly different to the ones used to target IE. This is because instead of including everything in one comment, there is one comment to open the if statement and another to close it. What this then does is open up what is written in the middle to be read by all browsers, but IE will ignore it until the conditional statement is closed. The reason why this has to be different is simply because if the whole condition was within the comment then every browser would ignore it, as other browsers would still treat it as a normal comment.
Breakdown of the Operators
The table below shows the supported features and describes what they do.
| Item | Description |
|---|---|
| IE | Internet Explorer, if followed by a number it means that version of iE (eg IE 6) |
| lt | Less than |
| lte | Less than or equal to |
| gt | Greater than |
| gte | Greater than or equal to |
| ( ) | subexpression operator |
| & | AND operator |
| | | OR operator |
| ! | NOT operator |
twitter
forrst
google+
Rss
7
Comments
Simple at straight to the object, nice post.
great article for browser compatiility, something all programmers should be aware.
Im not a fan of conditional comments, in fact at work we now have a policy of not using them at all.
Websites can be built quite easily without having to add browser specific code and as developers one of our aims should be to avoid things like this and only use them as a last resort, preferably not at all.
I think it really depends on the site itself, for example recently I did a site where there was a png that faded from black to transparent, it added nothing but a nice design touch to the website, so rather than use a png hack so that it worked on IE6 I used a conditional comment and just removed it on anything before IE7.
I do agree though that it shouldn’t be relied upon as a quick fix, it should be used to help a site downgrade gracefully if there is no other way to do it and if it is better to use a conditional comment rather than using a hack.
dizi is right conditional statements can be useful, i use them alot in my work as its better to remove things than to hack away at them.
Fine, this is for IE, but what about other browsers and their versions. I am having problems in those. Please help. What should i do.
Hi Ami, there are a lot issues with coding for cross compatibility. One tiny little bit of code can make a whole website look wrong in one browser while right in another, so its impossible to pin point your problem without seeing the websites code. If you want me to have a look at it let me know and I’ll see if I can help.