Using conditional comments to provide CSS for different browsers
Whilst I tend to hold the view if you design a website properly from scratch that you shouldn’t need different CSS, there are occasions when sometimes a minor tweak is required here or there for a particular browser (I’m talking to you Internet Explorer 6) in order for it to display correctly. Or in some cases you may want it to display differently.
If you find yourself in this position, I recommend defining the browser specific CSS definitions in a separate CSS file and using conditional comments.
Not only does using separate CSS files present a much cleaner solution, where the browser specific styling is clearly separate from the generic styling, you can also ensure that the specific CSS files are only loaded by the browser that required them.
Conditional Comments
I was of the opinion that these were widely known throughout the web design and development world, and perhaps they are, but there are plenty of people, perhaps starting out who may not have come across them yet, so hopefully this will prove useful.
I can already hear some dissenting voices pointing out that conditional comments are for Internet Explorer only, and whilst this is true of course, most CSS tweaks that are required tend to be for either IE6 or IE7 (which has turned out to have weird bugs of its own since the arrival of IE8). Maybe this is why Microsoft introduced them? Who knows. Either way, they’re damn useful.
The MSDN provides a detailed description of conditional comments, and I will only mention a few things here.
There are different ways of writing conditional comments, with different syntax, but I prefer downlevel-hidden and from what I’ve seen, this appears to be the most commonly used syntax.
Downlevel-hidden basically hides the code within the comments from browsers that do not support conditional commenting using standard HTML comments. An example is given below:
<!--[if IE 7]>
<p>Welcome to Internet Explorer 7.</p>
<![endif]-->
In this example, only Internet Explorer 7 browsers will display the specified code, all other browsers will ignore it. The conditions themselves can contain have a number of operators:
| Item | Example | Comment |
| ! | [if !IE] | The NOT operator. Places in front of an expression to reverse the Boolean meaning of the expression. |
| lt | [if lt IE 7] | The less than operator. Returns true if the first argument is less than the second. |
| lte | [if lte IE 7] | The less than or equal to operator. Returns true if the first argument is less than or equal to the second. |
| gt | [if gt IE 6] | The greater than operator. Returns true if the first argument is second than the first. |
| gte | [if gte IE 8] | The greater than or equal to operator. Returns true if the first argument is greater than or equal to the second. |
| () | [if !(IE 8)] | Subexpression operators. Used with boolean operators to create more complex expressions. |
| & | [if (gte IE 5) & (lte IE 7)] | The AND operator. Returns true if all subexpressions evaluate to true. |
| | | [if (IE 5) | (IE 6)] | The OR operator. Returns true if either of the subexpressions evaluate to true. |
Some examples
Using the above, you can clearly see how we can include, for example, an Internet Explorer 6 stylesheet for use with that browser only:
<!--[if IE 6]>
<link rel="stylesheet" href="css/ie6-specials.css" />
<![endif]-->
You must always put these declarations after the declaration of the main CSS file, as otherwise the styling will be overwritten.
Using this method, you could, if you wanted to, declare different stylesheets for each of the differen flavours of Internet Explorer out there:
<link rel="stylesheet" href="css/main-stylesheet.css" />
<!--[if IE 8]><link rel="stylesheet" href="css/ie8-specials.css" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" href="css/ie7-specials.css" /><![endif]-->
<!--[if IE 6]><link rel="stylesheet" href="css/ie6-specials.css" /><![endif]-->
or if you had combined some styles that work for both IE7 and IE6 but not IE8:
<link rel="stylesheet" href="css/main-stylesheet.css" />
<!--[if IE 8]><link rel="stylesheet" href="css/ie8-specials.css" /><![endif]-->
<!--[if lte IE 7]><link rel="stylesheet" href="css/ie6-ie7-specials.css" /><![endif]-->
Conditional comments can of course be used for displaying/hiding other valid HTML expressions, such as “IE 6 only” JavaScript (e.g. a PNG fix).
Conclusion
This has been a quick (and some might say, unnecessary) introduction to conditional comments for Internet Explorer, and of course my support for separate stylesheets for separate browsers, where required.