IF Internet Explorer THEN Do Something Else (A How To…)

Posted on Tuesday, September 19th, 2006

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.

Conditional Whats?

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:
Normal comment: <!-- Comment text -->
Conditional comment: <!--[If expression]> HTML <![endif]-->
(Source)

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.

The Expressions

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]

More Complex

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)
e.g. [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)
e.g. [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.

If you enjoyed this post, why not subscribe to Unintentionally Blank

Posted in Articles, Browsers, HTML/(X)HTML | Trackback | Leave a comment


Comments

  1. Pingback by 88 More ‘How To’ Articles - Group Writing Project Submission Part 2
    September 20th, 2006 at 9:31 am

  2. 1September 20th, 2006 at 1:07 pm

    Katy Says:

    Wow! Thanks for a great article.

    For years I’ve been moaning about IE’s stupidity when it comes to CSS and had to resort to JavaScript to hack around it, now I know I don’t have to!

    Found via Problogger.


  3. 2September 20th, 2006 at 1:14 pm

    Matt Says:

    Cool! Nice How to. I wondered how I could do that. Thanks for contributing to the Group Writing Project at ProBlogger. My How To is up also if you want to check it out.


  4. 3September 20th, 2006 at 2:37 pm

    Phil Says:

    Katy: Javascript? Nightmare! Glad I have helped!

    Matt: Who wouldn’t want to contribute to a great project such as this? I’m off to read your (and Katy’s) contribution right now.

    Thanks for dropping by both of you!


  5. 4September 20th, 2006 at 4:13 pm

    Jersey Girl Says:

    While participating in Problogger’s project it always amazes me how much I learn. There are so many blogs I’d never have stumbled upon so it’s nice to see new blogs with great articles.


  6. 5September 20th, 2006 at 11:03 pm

    Phil Says:

    Hi Jersey Girl, it is not only amazing what you can learn, but what other people know that surprises me too. The fact that out there are people who are experts in so many areas, as well as those who are funny or new or different in so many ways!

    It’s wonderful that Darren manages to bring all of these together in these projects. I only wish I had enough time to read all of them!

    Thanks for dropping by and leaving a comment too!


  7. 6September 21st, 2006 at 3:34 pm

    MamaDuck Says:

    Oh, that is just great! I don’t even have IE on here but I’m always having issues with people seeing odd things on IE on my site, so I’ll definitely be putting this to use. Our how-to is up as well if you’d like to check it out!!


  8. 7September 21st, 2006 at 4:55 pm

    Phil Says:

    Thanks MamaDuck, IE is a pain and you’re lucky you don’t deal with it yourself. Is that because you’re using a Mac? Hopefully, if you ever have to fix things my tips will be of some use.

    I like your how to, as well, it’ll be a few years before I put any of that into practise though!

    Oh and I like the new design too! (Don’t know when you changed it, but it’s different from the last time I saw it).


  9. 8September 22nd, 2006 at 6:28 pm

    HART (1-800-HART) Says:

    You wouldn’t need CSS hacks and conditional comment if Firefox properly displayed everything correctly

    :p

    Just kidding. I use both but prefer IEv7 now. What you did with the firefox/google button is a GOOD use of stuff like this .. It’s the sites that think they are superior and restrict access to IE browsers and users are the idiots out there and ignorant to the concept of the internet. I hope people learn from your article and use it for ‘goodness’ not ‘evil’.

    btw.. I really like this Blue Nature theme!


  10. Pingback by Kristonia Ink! » Full List of ProBlogger How To Contest Submissions
    September 23rd, 2006 at 1:33 am

  11. Pingback by Change your thoughts » Blog Archive » How to posts - loads of them
    September 23rd, 2006 at 7:03 am

  12. Pingback by Questallia » Problogger’s ‘How to’ Group Writing Project List
    September 23rd, 2006 at 1:55 pm

  13. Pingback by Mark Choon » The Biggest, really humongous, ‘How To’ list ever assembled in 4 days!
    September 23rd, 2006 at 3:04 pm

  14. Pingback by Ask blushgirl - Romance Advice, Tips and Dating Site Reviews » Blog Archive » Day 2 How-To Article Love
    September 24th, 2006 at 8:38 am

  15. 9September 24th, 2006 at 9:32 pm

    Phil Says:

    You wouldn’t need CSS hacks and conditional comment if Firefox properly displayed everything correctly

    My friends, Opera and Safari disagree with you :p

    You are right though, use of conditional comments (or any browser sniffing hacks) to restrict access to any browser is against the philosophy of the web. Blocking IE is wrong, but don’t forget all the sites that display “Best viewed in Internet Explorer”, in an attempt to get over the poor coding they have been subject to.

    The idea behind standards based design and coding is that everyone is treated equally and receives the same information. I hope I can instill that sort of idea with articles like this and others to come.

    Thanks for your comments Hart! Glad you like my theme too :)


  16. Pingback by Veerle’s Photo Imaging Contest, My Weekend Entertainment :: Unintentionally Blank
    September 24th, 2006 at 9:48 pm

  17. Pingback by Chewing Pencils: Helping you make money from drawing cartoons!
    September 25th, 2006 at 1:48 pm

  18. Pingback by CJCM and IT » Blog Archive » Problogger’s Group Writing Project
    September 26th, 2006 at 5:07 pm

  19. Pingback by Cell Phone Know How » 343 How To Posts
    September 26th, 2006 at 5:16 pm

  20. Pingback by Jornada Imperial - Em busca dos trilhões » Blog Archive » Muitos links sobre CSS e Sites CSS
    September 27th, 2006 at 8:26 pm

  21. Pingback by The Scott English Show - » More How To’s then you Could Poke a Stick At
    October 1st, 2006 at 6:00 am

  22. Pingback by Cross Browser Background Transparency With CSS :: Unintentionally Blank
    May 7th, 2007 at 12:35 pm

  23. 10March 5th, 2008 at 11:02 pm

    Joe Says:

    I’m not sure if this is right, but I think the not IE conditional statement needs a close statement brack for the other browsers to read the HTML (I needed it at least). here’s an example:

    HTML

    THanks for the article!


  24. 11March 6th, 2008 at 8:40 am

    Phil Says:

    Hi Joe,

    I’m afraid your HTML got stripped out by WordPress there and I don’t know what you mean! Sorry!


  25. 12August 2nd, 2008 at 6:25 am

    J_City Says:

    ok very nice thing to kno and very practical.. it works great with IE (duh) but when i preview in FIREFOX nothing comes up… so i realized that of course changing the IE of FireFox or FF or ff or Firefox etc, still when i preview the page on FIREFOX nothing appears.. I apologize if such an answer for my concern has been already placed and i missed it. however would be happy if any solution. thanks… very helpful!!!!


Leave a Comment