Internet Explorer has conditional commenting which allows you to put HTML into your web pages which show/not show depending on the version of Internet Explorer. This post looks at how to do this for selecting different or additional style sheets to load depending on the version of Internet Explorer used.
Rationale
Internet Explorer has a poor record of making formatting look the same across browser versions. Whereas a CSS layout will generally look the same across various versions of Mozilla Firefox, Safari or Opera, there can be major differences between the way a page renders across various versions of Internet Explorer. There are various ways of making things render in a CSS style sheet using different selectors, but sometimes it can just be easier to drop the e.g. Internet Explorer 6 “hacks” into a separate CSS file and conditionally load that after the main style sheet if the browser version is Internet Explorer 6.
Conditional Comments
Conditional comments in Internet Explorer look this example, where the code between the conditional tags will only show in Internet Explorer 6. It will not show in any other browser.
<!--[if IE 6]>this will only show in IE6<![endif]-->
There are a variety of other methods of showing/not showing content based on the version of Internet Explorer but they are beyond the scope of this post. javascriptkit.com has a good overview of IE conditional comments and Position is Everything has a table of IE version numbers (if you scroll down the linked page a bit) which is useful for working out what you need to enter to get it working correctly.
Conditional Comments for CSS selection
A main style sheet containing all the base settings should be loaded first (called main.css in the examples below) followed by the appropriate version by browser. You can either load a separate additional style sheet for each browser, or have one that’s loaded for e.g. less than IE7, less than IE6, less than IE 5.5 etc. Using this latter idea, IE 5.5 would therefore load the main stylesheet, the less than IE7 one and the less then IE6 one. If and when I do use this method, I prefer to have a main stylesheet, then one for IE 6, one for IE 5.5 and then one for less than IE 5.5. This is shown in the example below.
<link rel="stylesheet" type="text/css" href="/css/main.css" /> <!--[if IE 6]><link rel="stylesheet" type="text/css" href="/css/ie60.css" /><![endif]--> <!--[if IE 5.5000]><link rel="stylesheet" type="text/css" href="/css/ie55.css" /><![endif]--> <!--[if lt IE 5.5000]><link rel="stylesheet" type="text/css" href="/css/ie50.css" /><![endif]-->
Let’s look at each line from the above individually.
The first line loads the main.css file. This is common for all browsers.
<link rel="stylesheet" type="text/css" href="/css/main.css" />
The second line loads a CSS file called ie60.css if the browser version is IE 6.0. This is indicated by the comment [if IE 6]. No other browser will load this file because to non-IE browsers it just looks like a regular HTML comment. IE browsers know it’s a conditional comment but will ignore it if they are not IE 6.
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="/css/ie60.css" /><![endif]-->
The third line does the same as the above but for IE 5.5. Note that you need to make the version string IE 5.5000 (that’s 3 zeroes at the end) to work.
<!--[if IE 5.5000]><link rel="stylesheet" type="text/css" href="/css/ie55.css" /><![endif]-->
The final line says that all Internet Explorer versions that are less than IE 5.5000 should load the ie50.css style sheet.
<!--[if lt IE 5.5000]><link rel="stylesheet" type="text/css" href="/css/ie50.css" /><![endif]-->
Summary
So that’s all there is to it. You can change the stylesheets loaded by version as you see fit. For example you may only need to make adjustments for one particular version of Internet Explorer and not the others. Sometimes this approach may be overkill but if you find you are putting a lot of special selectors into a stylesheet to make things render correctly in various browser versions using this approach may simplify things somewhat.
