How do you handle browser specific .js and .css

Question

This is not a new topic, but I am curious how everyone is handling either .js or .css that is browser specific.

Do you have .js functions that have if/else conditions in them or do you have separate files for each browser?

Is this really an issue these days with the current versions of each of the popular browsers?

Answer 1

It's a very real issue. Mostly just because of IE6. You can handle IE6-specific CSS by using conditional comments.

For JavaScript, I'd recommend using a library that has already done most of the work of abstracting away browser differences. jQuery is really good in this regard.

Answer 2

Don't write them?

Honestly, browser specific CSS is not really necessary for most layouts - if it is, consider changing the layout. What happens when the next browser comes out that needs another variation? Yuck. If you have something that you really need to include, and it doesn't seem to be working in one browser, ask a question here! There are lots of great minds.

For JS, there are several frameworks that take care of implementing cross-browser behaviour, such as jQuery (used on this site).

Answer 3

The IE conditional comments have the downside of an extra file download. I prefer to use a couple of well-known CSS filters:

.myClass {
  color: red;     // Non-IE browsers will use this one
  *color: blue;   // IE7 will see this one
  _color: green;  // IE6 and below will see this one
}

(Yeah, it won't validate, but last I checked, our money comes from users and advertisers, not from the W3C.)

Answer 4

It is still an issue these days for CSS not working in all browsers (mostly IE6/7).

I've never needed a separate JS file for anything I've worked on. If you are using a JS library (jQuery, YUI, Prototype, etc), 99% of your browser incompatibilities will be taken care of.

As for CSS, I prefer to stick my browser-specific fixes in the same CSS file. It makes it a lot easier to debug when you only have to look in 1 place for your styling. You could spend hours debugging something only to find out the bug is caused by your 10 line browser-specific stylesheet.

It's also better from a performance perspective to only have 1 CSS and 1 JS file.