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