IE CSS Conditional Comments

Consistency across browsers is obviously extremely important and Internet Explorer 6 just won’t go away so unfortunately from time to time we need to use hacks to get around certain bugs and that’s where conditional comments can come in extremely useful.

I’ve stayed away from using conditional comments in the past mainly due to bad experiences of using browser sniffing in the past but having used them on a project recently I can see their advantages.

How to use conditional comments

Before you get carried away and start filling your HTML code with conditional comments, I’d like to be clear that they shouldn’t be used to litter your markup and hack at the HTML code until the presentation looks right in IE6.

Conditional comments should be used simply to include a separate CSS style-sheet which you can then use to target a specific browser with CSS applied to the same HTML.

IE6 conditional comments

Ok, so here’s the important part. You’ve written an HTML page, included a CSS style-sheet and now IE6 is causing problems.

You could use a hack (* html) to target IE6 but this can lead to a clutter of CSS with hacks in amongst the rest of your CSS.

However, using the following you can create a stylesheet that only gets included for IE6

<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" media="all">
<![endif]-->

This code will only target IE6 so any code can easily be placed in ie6.css safe in the knowledge that no other browser will implement this fix.

But what about IE5 and IE5.5

The good news is that it supports all Internet Explorer versions from version 5 upwards and can even be used to include greater than, greater than or equal, less than and less than or equal comments.

Conditional comments for a specific version of IE

Conditional comments for IE

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css" media="all">
<![endif]-->

Conditional comments for all versions of IE5

<!--[if IE 5]>
<link rel="stylesheet" type="text/css" href="ie5.css" media="all">
<![endif]-->

Conditional comments for IE5

<!--[if IE 5.0]>
<link rel="stylesheet" type="text/css" href="ie50.css" media="all">
<![endif]-->

Conditional comments for IE5.5

<!--[if IE 5.5]>
<link rel="stylesheet" type="text/css" href="ie55.css" media="all">
<![endif]-->

Conditional comments for IE6

<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" media="all">
<![endif]-->

Conditional comments for IE7

<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css" media="all">
<![endif]-->

Other conditional comments

Greater than

<!--[if gt IE 6]>
<![endif]-->

Greater than or equal to

<!--[if gte IE 5]>
<![endif]-->

Less than

<!--[if lt IE 6]>
<![endif]-->

Less than or equal to

<!--[if lte IE 5.5]>
<![endif]-->

Summary

As you can see from the options above, you should be able to target the specific IE browser that is causing those inevitable problems. However, I’d encourage you not to go overboard, always validate your HTML and CSS and ensure that there isn’t an easy work around first.

I’d also suggest that targeting Internet Explorer 6 will usually be enough to solve the majority of problems although if support for Internet Explorer 5 and 5.5 is required then you may also need to include a less than IE6 comment to cater for the box model problem.

Personally, I’d still considered this to be a hack so use conditional comments sparingly and only where they’re absolutely necessary but for those browser bugs that are well known it’s an excellent solution.