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?
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 😉