Kris "Justise" Gray

Introduction

This topic doesn't really need an introduction, so lets move on!

Options

DOM wrappers using Conditional Comments

This is the technique used by the jQuery UI site. The basics are that if you wrap your entire page in a DIV with the browser version as the class name, you can just add extra rules to your one stylesheet that will get picked up. Then you can use conditional comments to show the appropriate DIV when necessary.

With this solution, you can include all your CSS in one file, so everything is tidy and theres no extra web requests necessary.

It comes at the cost of your HTML cleanliness, but its overall very minimal.

Conditional Stylesheets

Using the same trick as above, you can include stylesheets conditionally on IE with conditional comments. The abilities of the conditional comment syntax is quite powerful, it seems like its wasted doing just stylesheet inclusion.

This is probably what I would suggest to most of you out there. Its quick, un-invasive and you can pretty much throw it out there and only worry about it when you really have to do something for just IE.

Let the server do it

I only mention this because I work in an enterprise environment that does just that. It includes an IE version of the stylesheet you referenced if the user is browsing in IE.

So if you have a stylesheet Calendar.css and you navigated to the page using IE, you would get tags for both Calendar.css and Calendar_ie.css. If of course Calendar_ie.css exists.

CSS Hacks, Syntax and Selector

So I'm regurgitating a bunch of information from this Web Dev Out CSS Hacks page which is that there are some CSS hacks based on selector engine parsing issues that are possible.

The primary options are those which are valid CSS, as invalid CSS is much more likely to cause you problems down the line.

Here's some of the selectors from that article.

IE 6 and below
* html {}

IE 7 and below
*:first-child+html {} * html {}

IE 7 only
*:first-child+html {}

IE 7 and modern browsers only
html>body {}

Modern browsers only (not IE 7)
html>/**/body {}

Recent Opera versions 9 and below
html:first-child {}

Its perfectly understandable that these may be your only options at the moment, but the chance they come back to bite you is so much higher as to make conditional comments worth your effort.

So, what to use?

Well, I tend to use the conditional extra stylesheet method, but between that and the DOM inclusion which are both good options its really up to you. You'll still have the comfort of knowing that your doing things the right way, and that the next .0.0.1 version of FireFox, IE, or WebKit won't break your site and bring down the internet.