Detect the user’s browser with javascript

Hello there! If you are new here, you might want to subscribe to the RSS feed for updates on this topic.

A big and boring problem for the designers is the cross-browser compatibility, expecially with the Microsoft explorer, because, as everyone knows, Microsoft is still living in his own world and not in the w3c standard world … Anyway this is one of the most frustrating situation that we must resolve when we are working on a new layout.
The solution used by the designer are : hacks, workaround and different stylesheet for the different browser(usually only the Microsoft browsers).
This last is the solution that I prefer for my works. I’m not a lover of the hacks, because they usually invalidate the code, and for this reason I prefer to use a different stylesheet for the explorer. If you write a good and clean code, you don’t need to change all the styles.
One of the most used solution, that I’ve used too, of course, are the conditional comments, to load the correct stylesheet relative to the user browser.
Another solution, is use a Javascript to detect the browser user and load the correct stylesheet. This is the solution that I want to talk in this post.

The idea is simple, and of course you can do teh same with the most afmous frameworks, but in this case I’m using only and pure Javascipt, anyway the idea is : create a variable that contains tha browser and write in the document the html code to load the stylesheet correspondent to the user browser:

var ievs = (/MSIE (\d+\.\d+);/.test(navigator.userAgent));

// IF BROWSER IS IE 6 LOAD IE6 STYLE

if (ievs){

var iev=new Number(RegExp.$1);

if (iev==6) {

document.write(’<link rel=”stylesheet” href=”css/ie7style.css” type=”text/css” />’);

}

}

// ID BROWSER IS IE 7 LOAD IE7 STYLE

if (ievs){

var iev=new Number(RegExp.$1);

if (iev==7) {

document.write(’<link rel=”stylesheet” href=”css/ie7style.css” type=”text/css” />’);

}
}

That’s all! You can try this creating a new page and visit the page using a browser Microsoft , IE 6 or 7, and look how it load the style,or , only for try, you can put and alert to see how it works:

if (iev==6) {

alert(“you are using explorer 6″);

}

Of course the conditional comments are a good solution, I usually use too, but sometimes I prefer this way, but you need to consider that if the javascript is disabled from the browser this script doesn’t works. of course there are very few uers with the javascript disabled today.

And hope that the Explorer 8 is better than the previous and Microsoft one day will understand how is important are the standard and , especially, understand that they are not a standard …..

Bye!