Browser detection for CSS: Use separate CSS files or inline CSS or...?

Question

I'm wondering which is best for speed:

Option 1: Loading separate CSS for each browser (separate JS file included through a <script/>):

// for internet explorer 6 & 7
if ($.browser.msie) {
    document.write('<link rel="stylesheet" type="text/css" href="/css/styles-ie.css" />');
}

// for opera
if ($.browser.opera) {
    document.write('<link rel="stylesheet" type="text/css" href="/css/styles-opera.css" />');
}

Option 2: Inline CSS (separate JS file included through a <script/>):

// for internet explorer 6 & 7
if ($.browser.msie) {
    document.write('[some CSS styles]');
}

// for opera
if ($.browser.opera) {
    document.write('[some CSS styles]');
}

Option 3: Or is there another better way?

Answer 1

I like conditional comments best, and while I didn't really test it, I expect it to be the fastest option as well, since no DOM manipulation is involved. There's also a great article about supporting IE talking with this technique, but it might be helpful to read an article on some pitfalls as well.

In my experience, it's not necessary to make any exception for other browsers than IE, but since your example lists Opera as well, I'd suggest you use some CSS hacks to make the (probably tiny) changes you need for Opera. If you do a web search for Opera Specific CSS you'll probably find something that you like ;)

Answer 2

I use a CSS Reset to level the playing field a bit. This usually makes all browsers behave rather predictably to the styles I apply. Of course, I have run into a few instances where IE renders things differently from more standards compliant browsers. Using conditional comments I can fix these differences with an IE specific stylesheet.