CODEWITHSUNDEEP
javascriptcss
Kevin
Kevin

Reputation: 1247

How do you handle browser specific .js and .css

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?

Upvotes: 6

Views: 2602

Answers (12)

Ionko Gueorguiev
Ionko Gueorguiev

Reputation: 312

I think conditional comments are great for style sheets but they can also be used for javascript/jquery.

Since the .browser has been deprecated and now removed from jquery 1.9 (?) using conditional comments is a pretty good way to do browser specific javascript.

here is my quick example:

1 - Place a conditional comment somewhere on the page. I personally put it right after the body tag. I've seen people use it on the actual body or html but that brings back the IE8/9/10 comparability view button and you want to avoid this if possible. 

<!--[if lt IE 9]><div class="ie8-and-below"></div><![endif]-->

2 - then use jquery to check if our IE specific container is there.

if ($("div").hasClass("ie8-and-below")) {
        //do you JS for IE 8 and below only
    }

3 - (optional) set your target comparability and put something like:

<meta http-equiv="X-UA-Compatible" content="IE=10" />

right after the <head> tag. (it has to be the very 1st thing after the opening <head>). This will turn off the compatibility button in ie10/9/8 if the rest of your page is properly coded. It's a good fail safe if you have sections that require comparability mode, other ways you may trigger your JS if running a newer browser in compatibility.

Note: As of the date of this post the http-equiv does not validate W3C standards but it's a very useful tag which has been adopted by the home pages of google and microsoft among others. I think it's only because W3C is a bit behind on adopting it.

Upvotes: 0

CMPalmer
CMPalmer

Reputation: 8623

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.

Upvotes: 0

toohool
toohool

Reputation: 1147

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

Upvotes: 3

cori
cori

Reputation: 8810

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

Upvotes: 2

Gordon Bell
Gordon Bell

Reputation: 13633

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/

Upvotes: 1

Rakesh Pai
Rakesh Pai

Reputation: 26277

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.

Upvotes: 2

Max Rible Kaehn
Max Rible Kaehn

Reputation: 251

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.

Upvotes: 0

neuroguy123
neuroguy123

Reputation: 1365

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.

Upvotes: 0

Ryan Doherty
Ryan Doherty

Reputation: 38740

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.

Upvotes: 2

Chris Marasti-Georg
Chris Marasti-Georg

Reputation: 34650

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

Upvotes: 4

John Sheehan
John Sheehan

Reputation: 78104

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.

Upvotes: 10

Oli
Oli

Reputation: 239810

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.

Upvotes: 1

Related Questions