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

I use a framework to handle 99% of the xbrowser stuff.

For everything not covered in the framework, I'd use a if/else or a try/catch.

Answer 2

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 3

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 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.

Answer 5

I use the built in functions of jQuery for the actual detection:

jQuery.each(jQuery.browser, function(i, val) {});

As for organization, that would depend on your application. I think putting this in an initialization code and then using the detection where you need it would be best. I still have issues where I have to detect Explorer on occasion. For example, when using jQuery, I have found that the parent() and next() functions will sometimes have different meanings in Explorer compared to Firefox.

Answer 6

Internet Explorer has conditional constructs like

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

that will let you bring in specific style sheets and JavaScript just for IE. I consider this a solution of last resort if there are no standards-compliant ways to deal with a problem.

Answer 7

Use what is known as "feature detection".

For example, if you want to use document.getElementsByClassName, do the following:

if(document.getElementsByClassName) {
    // do something with document.getElementsByClassName
} else {
    // find an alternative
}

As for CSS, you should largely be good if you use standards, except in IE. In IE, use conditional comments - it's the method recommended by the guys at Microsoft.

Answer 8

Both if/else and separate files, it depends on the complexity of the site.

There are definitely still incompatibilities between browsers, so consider letting a JavaScript Framework do the dirty work for you...

jQuery http://jquery.com/

Dojo http://www.dojotoolkit.org/

Script.aculo.us http://script.aculo.us/

Prototype http://prototypejs.org/

Answer 9

Personally I've mostly used conditional comments as noted above.

In the Stackoverflow podcast, though, Jeff indicated that Stackoverflow is using Yahoo's CSS Reset, which I'd never heard of. If it does what it's advertised to do it seems that would resolve many (most? all?) browser-based CSS differences; I don't see anything indicating conditional commenting in the Stackoverflow html source, at least. I'm definitely going to play with it on my next web project and would love to hear anyone's experiences with it.

As far as Javascript; as has already beed said, use your favorite JS Framework...

Answer 10

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 11

If you are doing ASP.Net development, you can also use Device Filtering (which I just learned about here on Stack Overflow today).

You can use it on your Page Directives to link in different skins, master pages, or CSS files, but you can also use on ASP.Net server control attributes, like this:

<asp:Label runat="server" ID="labelText" 
   ie:CssClass="IeLabelClass" 
   mozilla:CssClass="FirefoxLabelClass" 
   CssClass="GenericLabelClass" />

That example is, of course, a bit extreme, but it does let you work around some nasty browser inconsistencies while using only a single CSS file.

I also second the idea of using a CSS reset file and definitely use a library like jQuery instead of reinventing the wheel on JavaScript event and DOM differences.