Thanks to the magic of Google Analytics I have discovered that a good number of this blog's visitors reach here with searches to do with Internet Explorer's conditional comments. This is due to my post, a month back, extolling the use of conditional comments instead of CSS hacks. More recently I considered that if someone was searching for information on conditional comments then they were unlikely to find interest in an article merely telling them they should use them. Then along came the latest ProBlogger Group Writing Project - How To... and it all made sense. So here is how you can improve your code and drop those worthless CSS hacks; How to use conditional comments - the practical version.
I'll start at the beginning (seems like a logical place to start): over the years of different browsers coming and going there have been ways of sniffing out what your users are visiting your site with, through either client or server side scripts. When Microsoft launched IE5 they included a method of checking which version of IE was viewing a site using HTML comments. This has continued to appear in releases of IE and now you can target any version of IE from 5 to 7 using these comments.
So, How Do They Work?
The basic syntax for conditional comments is as follows:
<!-- Comment text -->
<!--[If expression]> HTML <![endif]-->
Note: Microsoft also provide a method of usng these conditional comments to serve content to browsers other than IE, but this uses invalid HTML, so I will display a fix later.
For a start, you can target any IE past version 5 with the conditional comment
<!--[If IE]> HTML <![endif]-->
Furthermore, you can target any version of IE since version 5. Practically there are 4 sufficiently different versions of IE to consider though: 5, 5.5, 6 and 7. To target any one of these on there own is quite simple, add the version number to the expression above, e.g.
<!--[If IE 6]> HTML <![endif]--> will target IE6 only.
The case of versions 5 and 5.5 is slightly different, however. The conditional comment
<!--[If IE 5]> HTML <![endif]--> will target both IE5 and IE5.5. To target IE5 on it's own you need to use
[If IE 5.0] and to target IE5.5 on it's own, you need
[If IE 5.5]
If targetting one single version, or any version IE is not good enough for you, then you need to know about the other operators allowed.
- ! (negation)
- Use the negation to select all versions except the one specified, e.g.
[If !IE 6]will select IE 5, 5.5 and 7.
- lt (less than)
- Select any versions less than the one specified, e.g.
[If lt IE 6]will select IE 5 and 5.5.
- lte (less than or equal)
[If lte IE 6]will select IE 5, 5.5 and 6.
- gt (greater than)
- Select any versions greater than the one specified, e.g.
[If gt IE 6]will select IE 7 (and any later versions that may appear).
- gte (greater than or equal)
[If gte IE 6]will select IE 6 and 7 (and later).
Of course, negation can be used with any of the order relationships as well. To see how best to use all of these methods, Manfred Staudinger wrote a definitive piece at Position Is Everything (though the top half of the article is about running multiple versions of IE on one computer).
Targetting Browsers Other Than IE
As I mentioned above, Microsoft also provided a method of hiding content from IE too, but the HTML was not valid. The method was as such:
<![If expression]> HTML <![endif]>
As you can see, the comment is not HTML and is therefore ignored by other browsers who will continue to parse the HTML within. You can also target versions of IE to read it as well, using expressions as above.
However, using invalid HTML is never something that should be encouraged, particularly as we move towards XHTML and serving webpages as well formed XML which will break if invalid structures are used. So thanks to Lachlan Hunt (and Roger Johansson for clearing it up somewhat) there is a method of hiding content from IE using valid HTML conditional comments and it looks like this:
<!--[if !IE]>--> HTML <!--<![endif]-->
What To Do With Them?
Are these conditional comments any use then? My favourite use of them is to stamp out hacks in my CSS files and just serve an additional CSS file to IE to fix any problems it has. You could always use them to display messages to users of IE only, maybe mentioning that they might want to get hold of Firefox. Just while thinking about that I actually removed an advert in my sidebar for Firefox, that is unless you are viewing with IE. Go on, have a look.
Has this article helped? I hope it has shed some light on safe detection of IE adding to it the way of targetting other browsers in a valid way. Also, if anyone has any other ideas for what to use conditional comments for, please let me know and I'll try to mention the best ones.