Using Conditional Comments to Catch IE

A while back I whipped up a little script to detect and redirect visitors if they were using an old version of IE. In the comments I went on to say that a more effective/professional way of handling IE users is using Conditional Comments.

As at least one commenter was curious how this is done, here’s how.

The Problem

Internet Explorer, particularly versions less than 7, is quite simply a pain to work with. If you design a site to W3 standards, it will often look like crap in IE. If you design it strictly for IE, it will look like crap in most other, standards compliant, browsers. It is, in the simplest terms, gawd damn ridiculous.

Sadly, due in part to lack of user interest in upgrading, or lack of ability due to Windows Genuine Advantage implementation, I still see wide-spread IE6 usage – which means, professionally at least, I need to tackle it head on.

What are Conditional Comments?

For all its lack of considerations towards designers not in love with their proprietary pushing ways, Microsoft has done one thing right – they’ve given us the ability to catch if a site visitor is using an MS browser and what version it is.

Conditional Comments are essentially if statements you throw into your HTML. If it is this version of IE, do this, if it is another version of IE, do something else.

So, if I want to simply greet my users by telling them what IE version they’re using I would use something like this:

<!--[if IE 7]>You're using IE7<![endif]-->
<!--[if IE 6]>You're using IE6<![endif]-->

Which would output the following:

If you’re not using IE7 or IE6 – you won’t see anything. And you’re not 😉

You can also detect ranges of IE browsers, or that the browser isn’t IE at all:

<!--[if lte IE 7]>You're using IE7 or less.<![endif]-->
<![if !IE]>You're not using IE - congratulations!<![endif]>


You’re not using IE – congratulations!

Great, so how do I use them?

There are a number of ways in which you can use Conditional Comments to add some conditional styling based on which IE version you’re trying to tackle.

One of the most common ways of handling this is to create separate CSS stylesheets for the different IE problems versions. I pretty much completely ignore IE5.5 or less in development – it is a browser released nearly a decade ago, and has three new versions above it, I think it’s safe to say it is dead.

So, this leaves me with a need to catch IE6 and above. But not all IEs are created equal. In fact many of the problems IE6 has were fixed in IE7 (and I assume in IE8, though I’ve not tried it yet). So, lets create three stylesheets:

main.css – contains the style information for our entire site.
ie7_8.css – contains any style “modifications” needed to get IE7 and IE8 working.
ie6.css – contains any style “modifications” needed to get IE6 working.

The way that CSS works is that if there are two style rules attached to the same element, the last rule is followed. So if I have:
.main {background-color: #fff;}
.main {background-color: #000;}

The second rule will overwrite the first, and .main‘s background will be black (#000), not white (#fff).

Knowing this, we know we should load our IE rules after our main stylesheet so that the IE rules overwrite the standard styles. In your HTML (or the template/theme files of your site if you are using a CMS like Joomla, Drupal or WordPress) simply add some derivative of the following between the <HEAD></HEAD> tags:

<link rel="stylesheet" type="text/css" href="main.css" />
<link rel="stylesheet" type="text/css" href="ie7_8.css" />
<link rel="stylesheet" type="text/css" href="ie6.css" />

That will load all the stylesheets, but we only want to load the IE-related stylesheets IF the browser viewing the page is the right version of IE. So, we use Conditional Comments:

<link rel="stylesheet" type="text/css" href="main.css" />
<!--[if gte IE 7]><link rel="stylesheet" type="text/css" href="ie7_8.css" /><![endif]-->
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="ie6.css" /><![endif]-->

Now, if the visitor is using IE7 or greater (gte = greater than or equal to), the ie7_8.css file will be loaded and overwrite our main.css rules. Ditto ie6.css.

The Lazy Man’s Way – One Stylesheet

Alright, the above mentioned method is likely the best, as you are only loading as much CSS as needed, and if you want as lean a site as possible, that’s the route to take.

But I’m lazy. I rather dislike moving from one stylesheet to another while developing, so here’s how to use Conditional Comments with one stylesheet.

Rather than create different CSS files, you simply create a couple additional wrapper DIV elements, based on Conditional Comments, in your HTML markup. You can then use these in your main.css file to target the version of IE the visitor is using.

So, sticking with our example above:

<body>
<!--[if gte IE 7]><div id="IE7_8"><![endif]-->
<!--[if IE 6]><div id="IE6"><![endif]-->

<div id="content">This is some content</div>

<!--[if gte IE 7]></div><![endif]-->
<!--[if IE 6]></div><![endif]-->
</body>

If the visitor is using IE7 or greater, a new wrapper DIV element will be created and surround all the other elements on the page (minus BODY). Ditto IE6.

You can then target these browsers in your main.css file using the following CSS:
#content {background-color: #fff;}
#IE7_8 #content {background-color: #000;}
#IE6 #content {background-color: #ccc;}

So, in this (completely arbitrary) example, #content‘s background will be white (#fff) in all non-targeted browsers, black (#000) in IE7 or above browsers and grey (#ccc) in IE6 browsers.

Obviously these examples are just to show the principles. However, armed with how Conditional Comments work and how to effectively use them to target offending browsers, IE is a much easier dragon to slay.

Further Reference

Microsoft’s page about Conditional Comments (gives examples of most the variations you can use)

24 thoughts on Using Conditional Comments to Catch IE

  1. I’m always on the lookout for ways to avoid doing “real” work. 😉

  2. Hey Ryan

    I just tested the page in IE7 out of curiosity, and it stops at ‘If you’re not using IE7 or IE6 – you won’t see anything’. The rest of the content, including the comments area and the sidebar, is missing.

  3. Doh! Cheers Dan. It was an issue with downlevel-hidden and downlevel-revealed comments. I simply had it formatted wrong. For anyone using the !IE conditional comment – pay particular attention to the use of the double-hyphen (–), or lack thereof.

  4. thanks you very much. But

    #content {background-color: #fff;}
    #IE7_8 #content {background-color: #000;}
    #IE6 #content {background-color: #ccc;}

    is doesnt working. I dont understand this logic.

  5. On the subject of conditional statements.. I hat IE7 and the recent swfobject issues it has thrown up while testing.. is there some sort of change to how java is handled in IE7?

    Anyway I am looking for a way to set a conditional statement to say If IE7 is browser use quicktime as the video player else use my swfobject and flash setup!

    any ideas would be great..

    Love your oldie.js solution.. I have used it for a test and prank on someone.. hee hee your browser is crap .. try something else.. i.e Safari/opera or the mighty Firefox.. you appreciate the suggestion!

  6. @Prefabrik: That is CSS – it needs to either go between <style></style> tags or it needs to go in its own CSS file. Essentially, the way it works in the example in this post is the IE conditional comments insert an extra wrapper DIV around the entire contents of the page IF it matches the conditional.

    @Andrew: As you can use conditional statements directly in the source of a page, you could just wrap the QuickTime embedding code in the appropriate Conditional Comment, and wrap the Flash/swfobject in a !IE (not IE) Conditional Comment.

  7. Where do I put the code in my script?

    // if IE 7><end if//

    is this about right?

    abviously the mark up is ot right cos I was not sure how to submitt proper html into a post..

    I tried the above sort of and it did not work in safari..

    cheers

    Andrew

  8. @Andrew: Something like this should work:

    <!–[if IE 7]><div id=”IE6″>
    Whatever you want to happen for visitors using IE7
    <![endif]–>

    <![if !IE 7]>
    Whatever you want everyone else to see
    <![endif]>

    I’ve not tested this, but can’t see why it wouldn’t work. Notice that the two conditional comments aren’t exactly the same. The “not” comment (!IE) doesn’t have dashes.

    FYI – if you need to show < and > symbols in comments, the only way to really do it is to use &lt; and &gt; – they will convert to < and >

  9. Cheers Ryan,

    Have managed to figure it out now..

    http://www.moonoo.co.uk/new/citizen.html

    This page has the script on it at the moment.. jw FLV player for every other browser bar IE7.. plus alternative quicktime if you haven’t got flash installed.

    Was thinking of a way to downgrade from flash to quicktime and then windows media as a last resort but wasn’t sure if this was possible with conditional statements in the code.. not too hot with java so was wanting to avoid it.

    Have you noticed issues with swfobject and IE7?

    It’s weird how my whole beta site is working on everything bar IE7 even IE6 is working fine..

    cheers for your comments and help.

    Andrew

  10. Hey Ryan,

    Do you know of any good javascript written tree menu’s that dowgrade to simple html if javascript is disabled?

    I have a large site and was not wanting to change a shed load of pages everytime I added more content.. so either dynamically populated or a menu that is the same block of code on each page that I can just copy paste to all my pages.

  11. Pingback: Hate Internet Explorer? Take a stand against IE6 browser | Dao By Design Blog
  12. Is there a way to use conditional comments to redirect to a static html page instead of a custom style sheet? I have built a conditional style sheet for IE 7, but IE 6 is so messed up I just want to redirect to a static page with download links for every other browser, and key links that the user may be trying to access. I am not sure how to go about doing this, or even if it is possible. Any ideas?

    Thanks

  13. @Hilts50: Sure, just use something like this:

    <!–[if lte IE 6]>
    <META
    http-equiv=”refresh”
    content=”0;URL=http://www.yourdomain.com/iepage.html”>
    <![endif]–>

    This will automatically redirect anyone using IE6 or less to a page called “iepage.html” on yourdomain.com, but will be ignored by all other browsers.

  14. Pingback: Detect & Redirect Script For Internet Explorer (IE) | Dao By Design Blog
  15. <!–[if IE]><meta http-equiv=”refresh” content=”0;url=http://www.mozilla.com/en-US/firefox/switch.html”><![endif]–>

  16. Pingback: SEOSimple Joomla 1.5 Plugin v1.3 | Dao By Design
  17. hello

    I found your explanations very helpful a year ago and inserted a redirect-order into my page as it was quite impossible to teach IE6 to get the two (two-language-poetry) columns as straight as any other browser does (I work with CSS).

    Back then I remember it to work fine: Explorer users jumped on to an adapted page. But now, when checking, every browser in my computer, including Firefox and Safari, jumps on.

    I took away the redirect order and inserted a simple comment kind of ‘IE 6 users please click here’, to see if something was wrong with the redirect. Also this comment shows up in every browser I use.

    The syntax is the following:

    Si los poemas en árabe y castellano no están equilibrados, acude a la Versión para Explorer

    Looks like Firefox and Safari learned to read conditional comments? Any good advice?

    thanks a lot!

    ilya

    • Hi Ilya,

      The code didn’t come through in your comment, but I was able to find the page you were referencing and see the code you’re using and I think it’s a weird encoding issue that probably came from copying and pasting the conditional comment from a Web site. Try grabbing the code from here and seeing if it works for you (I tested it and it works as expected). For the sake of knowing where the error is, I am pretty sure that in your opening conditional comment, the second “dash” is an “en-dash” instead of a hyphen.

  18. Dear Ryan

    The news in short: Thanks a million. Everything works now! Great!

    The news at length: First I thought it was the strangest thing ever seen: both your code and mine seemed to be exactly the same. But when pasting yours, everything after the code disappeared (in IE 6, but not in Firefox). That meaned that a) the IE read the conditional comment, while Firefox did not, but b) that IE did not read the closing particles.

    Luckily you told me that the dash / hyphen could be the problem. So I copied your first two hyphens !– and with these I replaced the two at the closing –>. Suddenly everything worked!

    Strange enough, though, that in your same code, my computer reads two hyphens as correct and two as incorrect, when they look exactly the same even in HTML.

    The bottom line: Giving an explanation besides just helping out is what really helps. Thanks again.

    ilya

Say something...

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Return to Top ▲Return to Top ▲