LessFuss Design

Conditional comments, combined with some browser-specific CSS, are a great way to get your website’s design & layout working in the various versions of Internet Explorer. But be careful, browser version targeting can soon have you and your website’s layout in knots unless you know exactly which browser(s) you want to target, and what CSS hacks to use.

What are conditional comments?

A conditional comment is a simple ‘If’ statement that goes in the head section of a web page, inside a standard HTML comment. Conditional comments are only interpreted by the Internet Explorer (IE) family of web browsers from version 5 upwards.

A typical conditional comment looks like this:

<!--[if lte IE 6]>
<link rel=”stylesheet” type=”text/css” media=”screen” href=”/css/IE6.css” />
<![endif]–>

In this example the If statement is asking if the browser is Internet Explorer 6 or a previous version (lte IE 6 - less than or equal to IE 6). If it is, the browser will process the instruction inside (download a stylesheet). If it’s not (i.e. the browser is Internet Explorer 7 or later, or any other non-IE browser) it will move on.

This article focuses on using conditional comments with CSS, but you can put pretty much anything inside a conditional comment as long as it is valid HTML. If you use an HTML editor that colours your tags, and you’ve a fair bit of code to put in, you’re best off doing the code before you wrap it in the conditional comment.

For a comprehensive list of the syntax for conditional comments, and the kinds of browser tests you can do, see the Quirksmode website .

Why use them?

It’s fair to say that the web browser that gives web designers the most headaches is Internet Explorer, and of these IE6 is the most ‘challenging’. It seems that with every web design you do, no matter how straightforward it might at first seem to mark up and style with CSS, you’ll end up with something that just won’t play ball in IE6 (and at times IE7 too), but works fine in the standards-compliant browsers.

Sometimes you can fix display issues across all browsers with one single bit of CSS. But often there’s no alternative but to use some different CSS for the different browsers that are giving you grief.

You can do this by having one single stylesheet with all your CSS, including the various Internet Explorer hacks, but conditional comments can make life much easier by giving you a way of separating your IE-specific CSS from the rest. Putting it all in one separate stylesheet (e.g. IE.css) makes it far easier for you to manage, and the standards-compliant browser don’t have to wade through chunks of CSS they don’t need to interpret.

Where’s the catch?

It’s not really a catch as such, but I’ve found you do need to be on your guard when using conditional comments. When it comes to CSS there are different levels of support between Internet Explorer versions, so it’s important you know exactly what styling you need to ‘feed’ to each version.

Width is an excellent example, and a crucial part of any web design. In CSS you can give a block element a minimum and maximum width by using the min-width and max-width selectors. Internet Explorer 6 doesn’t understand these selectors, but the standards-compliant browsers such as FireFox and Safari do - but so do Internet Explorer 7 and 8.

This is one of many examples of how IE7 behaves differently to IE6. And IE8, when it comes, will probably also have its quirks too. The point to note is that if you use conditional comments, you need to be careful not to simply test for Internet Explorer (e.g. ‘if IE’) and have one separate IE stylesheet for all versions, unless within it you differentiate between the versions through different CSS hacks (more on that in a minute).

Using conditional comments

As an example, say you want your overall web design to have a maximum width of 950 pixels and a minimum width of 760. The CSS looks like this:

#wrapper{
min-width:760px;
max-width:950px;
}

Most browsers can interpret this, but you need to do something else for IE6 and older. You’ve a couple of choices - you can use CSS to serve a different width setting to that browser (e.g. fixed width), or use a javascript expression to get min-width working. Either way, you only want Internet Explorer version 6 and older to see it, so use a conditional comment:

Using CSS

<link rel="stylesheet" type="text/css" media="screen" href="/css/global.css" /> <!--stylesheet with styling for all browsers-->

<!--[if lte IE 6]>
<style type=”text/css” media=”screen”>
#wrapper{
width: 760px; */setting is overwritten for IE version 6 and older */
}
</style>
<![endif]–>

Using javascript

<!--[if lte IE 6]>
<style type=”text/css” media=”screen”>
#wrapper { width: expression((documentElement.clientWidth < 760) ? “760px” : “auto” ); }
</style>
<![endif]–>

To bring IE7 into it, lets say you want to apply different margins and padding to an element for standards-compliant browsers, IE6 and IE7. There’s two ways to do it using conditional comments: use one comment and hacks for each browser, or two separate comments.

This is the original setting (in global.css, for example):

#div1{
margin:10px auto;
padding:8px;
}

Using one conditional comment

<link rel="stylesheet" type="text/css" media="screen" href="/css/global.css" /> <!--stylesheet with styling for all browsers-->

<!--[if gte IE6]> (If IE6 or above)
<style type=”text/css” media=”screen”>
* html #div1{
margin: 20px auto; */setting is overwritten for IE6 using specific CSS hack */
padding:2px;
}
*+html #div1{
margin: 15px auto; */setting is overwritten for IE7 using specific CSS hack */
padding: 0;
}
</style>
<![endif]–>

Using two conditional comments

<!--[if IE6]> (If IE6and IE6 only)
<style type=”text/css” media=”screen”>
#div1{
margin: 20px auto; */setting is overwritten for IE6, but no hack required */
padding:2px;
}
</style>
<![endif]–>

<!--[if IE7]> (If IE7and IE7 only)
<style type=”text/css” media=”screen”>
#div1{
margin: 15px auto; */setting is overwritten for IE7, no hack required*/
padding: 0;
}
</style>
<![endif]–>

Both examples have the same result, the difference between the two is that in the first, you’re testing for multiple versions (IE6 and greater), and therefore if you want different styling for each version you have to apply the specific hacks (i.e. prefix the selector with * html for IE6 and *+html for IE7).

Bear in mind that if you use the ‘gte’ test (greater than or equal to), you will be including newer versions of Internet Explorer as and when they are released – which you may not necessarily want to be doing.

You can get a full list of all the hacks and which browsers support them at centricle.com: will the browser apply the rules?

In the second example, because the conditional comments are more granular, you don’t need the hacks at all.

Which approach you choose will depend on the amount you need to alter for each browser version, and how many changes in total you have to make. If you only have a handful of CSS tweaks to get IE on track, then a single comment with the CSS declarations inside will probably do. If you’re making big changes for IE6 that involve resetting the behaviour of multiple elements (like forcing a fixed width layout), then you’ll be better off putting that in an IE-only (or IE6-only) stylesheet and using the conditional comment to call it.

Whichever way you choose, using conditional comments can put you in control of exactly which browsers see which style declarations. You just have to watch what you’re putting where, and keep checking the results in the browsers, because it can get fiddly!

Why bother with Internet Explorer 6?

Is it worth the effort? Internet Explorer 6 is an old browser now, and with Internet Explorer 8 soon to be released - with a standards-compliant mode enabled by default - use of versions 6 and 7 will eventually decrease.

But the fact is IE6 is still one of the most widely used browsers out there, and it amazes me that there are web designers who don’t even view their live sites in Internet Explorer 6, let alone test them on it while in development.

From 1 January to 31 May 2008, over 88% of sessions on the South Norfolk Council website (where my day job is) were with Internet Explorer, just over 43% of which (62,000 sessions) were with IE6.

Globally, Internet Explorer still dominates when it comes to browser market share, and while Internet Explorer 7 is the most widely used version, it’s clear that there are still a substantial number of people using Internet Explorer 6 and older. (For various market share statistics visit the Wikepedia article ‘Usage share of web browsers ‘.)

Given that during the same period the South Norfolk Council website also had over 300 sessions by users on Internet Explorer 5, it’s clear that older browser versions take a good deal of time to disappear once they’re superceded.

So yes, getting a site usable and looking as best as it can in Internet Explorer 6 is definitely worth it.

Be nice with your conditional comments

If you can give specific instructions to Internet Explorer with conditional comments, then you can use them to send a message to people using specific version of it. You could, for example, have a div that’s hidden by default, but shown to Internet Explorer 6 by amending the CSS inside a conditional comment. Inside that div you could have some text along the lines of ‘You’re using Internet Explorer 6 - poor you!’.

Here’s an example from web designer Andy Clarke of Stuff & Nonsense. View his site in FireFox or Internet Explorer 7, then take a look in IE6:

www.stuffandnonsense.co.uk (if you get an illustration of a scooter then great, otherwise it’s probably been redesigned).

In Internet Explorer 6 you get a message over on the right suggesting you move up to a better browser, and the whole design is in black and white. I know Internet Explorer 6 has deficiencies, but I’m fairly certain being unable to display things in colour isn’t one of them. Plus, IE6 users don’t get wing mirrors on their scooter. More salt in the wound.

Personally I don’t think that web designers should ever advise web users on what browser they should be using. Our job is to create web pages that can be used by as many people as possible, and that includes the millions of users on older browser versions - no matter how painful it can be to code for them.

It’s also worth remembering that many web users couldn’t change browser even if they wanted to. Users behind corporate firewalls, at free access PCs in libraries, and students on school & university networks won’t be able to upgrade. These old timers will just have to put up with it.

Summary

• Aim to write CSS that can be used by all browsers without any over-rides;
• When, like me, you find that’s not always possible and you need to tell Internet Explorer something different to get your design/layout working, conditional comments can help you out.
• Be careful which browser versions you target in the comment, and use the right CSS hacks to do the job.
• Be careful when using gte (greater than or equal to) in conditional comments - this will include new versions of Internet Explorer as and when they are released, but the CSS overrides you’ve written may not be suitable or required for them.
• Design and code your sites with older versions of Internet Explorer in mind, and test the results in versions 6 and 7 at least, plus 8 when it’s out. (See the links below for some places you can get websites tested in a variety of browsers.)
• Test with IE6 & 7 from the very first piece of markup you write, and write your IE-specific CSS as you go along, not at the end before you publish (or worse, after you publish). Retrofitting is never any fun.
• Don’t be too precious about the design. If it’s not pixel perfect in IE6 but it’s useable, move on - you’ve got more important things to do. If it’s useable, you’ve done the job.
• Don’t pick on users with older versions of a browser. Not everyone gets obsessive about what software they’re using, the majority of people just want to get on with using the web. And for that, Internet Explorer 6 does OK.

Useful links

• Quirksmode: conditional comments
  Lists the syntax for the various different conditional tests you can do.
• Centricle.com: CSS hacks & browser support
  Invaluable list of the known CSS hacks, and which browsers and browser versions support them.
• Wikipedia: useage share of web browsers
  A good place to start if you want to find out which browser and browser versions are the most used.
• Vandelay Design: testing on multiple browsers
  List of some of the online services that allow you to test a website in a mind-boggling number of different browsers and browser versions. Some are free, some aren’t. But if you don’t have a number of different machines with different browsers at your disposal, these kinds of services are indespensable.