Structuring your CSS - A Slight Revision

June 2, 2006

With the forthcoming release of a new version of Internet Explorer, many of the hacks and workarounds used by site developers to target individual browser flaws and serve custom CSS are going to stop working. The developers of IE 7 have themselves warned that a number of the hacks, (such as those discussed previously on this site) will no longer work and should be avoided. They're suggestion as a replacement method is to use conditional comments, something we have been implementing at Cimex for some time.

The following is an example in using conditional comments to serve CSS files to different versions of Internet Explorer. One caveat is that Internet Explorer 5 (OS X) does not make use of these conditonal comments and, if you are still supporting it, will need to be served CSS using an alternative method.

<link rel="stylesheet" ... href="list.css" />
<!--[if IE 5]>
<link rel="stylesheet" ... href="ie-5-win.css" />
<![endif]-->
<!--[if IE 6]>
<link rel="stylesheet" ... href="ie-6-win.css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" ... href="ie-7-win.css" />
<![endif]-->

The above code provides a default “list.css” stylesheet which in my template serves a stylesheet to reset all elements to their default values and a stylesheet for the site itself. Conditional comments supplement this with a specific CSS file for each browser version under Microsoft Windows. The OS X version is served its CSS file from within the “list.css” file.

This method has worked for my testing of the preview of IE 7 beta 2. That doesn't mean it will work in the final version.