How do you handle specific .js and .css browsers

Question

This is not a new topic, but I'm curious how everyone handles .js or .css, which are browser dependent.

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

Is this really a problem with the current versions of each of the popular browsers?

Answer 1

This is a very real problem. Mostly just because of IE6. You can handle CSS with IE6 using conditional comments .

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

Answer 2

Do not write them down?

Honestly, CSS for browsers is really not needed for most layouts - if so, consider changing the layout. What happens when the next browser appears that needs a different option? Ugh. If you have something you really need to enable and it doesn't seem to work in the same browser, ask a question here! There are many great minds.

For JS, there are several frameworks that implement cross-browser behavior, for example jQuery (used on this site).

Answer 3

IE conditional comments have the disadvantage of extra file downloads. I prefer to use some 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 } 

(Yes, it will not be checked, but the last time I checked, our money comes from users and advertisers, not from W3C.)

Answer 4

There is still a problem these days because CSS does not work in all browsers (mostly IE6 / 7).

I never need a separate JS file for everything I worked on. If you use the JS library (jQuery, YUI, Prototype, etc.), they will take care of 99% incompatibility of your browser.

As for CSS, I prefer sticking with my browser-specific fixes in the same CSS file. This makes it much easier to debug when you need to look in only one place for your style. You could spend several hours debugging to find out that the error was caused by your 10-line stylesheet.

It is also better in terms of performance to have only 1 CSS and 1 JS file.

Answer 5

Use what is known as feature detection . "

For example, if you want to use document.getElementsByClassName , follow these steps:

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

As for CSS, you should pretty much be good if you use standards other than IE. In IE, use conditional comments - this is the method recommended by the guys from Microsoft .

Answer 6

Personally, I mainly used conditional comments as above.

In the Stackoverflow podcast, however, Jeff pointed out that Stackoverflow uses a Yahoo CSS Reset that I have never heard of. If he does what he advertises, can he solve many (most?)? CSS based browser differences; I don't see anything that indicates conditional commenting in the Stackoverflow source HTML file, at least. I will definitely play with this in my next web project and would like to hear how someone experiences with it.

Regarding Javascript; as already mentioned, use your favorite JS Framework ...

Answer 7

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

For everything that is not considered in the structure, I would use if / else or try / catch.

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

I use jQuery built-in functions to actually detect:

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

As for the organization, it depends on your application. I think that inserting this into the initialization code and then using discovery where you need it would be better. I still have problems when I sometimes have to find Explorer. For example, when using jQuery, I found that the parent () and next () functions sometimes have different meanings in Explorer compared to Firefox.

Answer 10

Internet Explorer has conditional constructs such as

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

which allows you to enter specific stylesheets and JavaScript for IE only. I consider this a solution of last resort, if there are no standard solutions to the problem.

Answer 11

If you are developing ASP.Net, you can also use Device Filtering (which I just found out here in Qaru today).

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

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

This example is, of course, a bit extreme, but it allows you to get around some nasty browser inconsistencies using only one CSS file.

I also reinforced the idea of ​​using a CSS reset file and am definitely using a library like jQuery instead of reinventing the wheel on JavaScript events and DOM differences.

Answer 12

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

Since .browser is deprecated and is now removed from jquery 1.9 (?) Using conditional comments, this is a pretty good way to make a javascript browser.

here is my quick example:

1 - Put a conditional comment somewhere on the page. I personally put it right after the body tag. I saw how people used it on the body itself or html, but this returns 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 particular IE container exists.

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

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

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

immediately after the <head> . (this should be the very first after opening <head> ). This will disable the compatibility button in ie10 / 9/8 if the rest of your page is correctly encoded. This is a good glitch if you have partitions that require compatibility mode, other ways to start JS when starting a newer browser in compatibility.

Note. At the time of publication of this post, http-equiv does not confirm the W3C standards, but it is a very useful tag that has been adopted by google and microsoft home pages among others. I think this is only because the W3C is slightly behind its adoption.