CSS Browser detection using jQuery instead of hacks

Browser sniffing is messy. There are a million ways to do it but none of them are particularly clean and most involve conditional statements such as "<!--[if condition]> HTML <![endif]-->" for IE and various other CSS selector hacks for other browsers.

I've done a fair amount of browser sniffing with jQuery recently and it's really easy, useful for when you need to detect the browser and version number in your javascript. It occurred to me that it would be easy to detect the browser and then put something in the DOM that your CSS could use for conditional formatting. So I wrote a quick script in JavaScript/jQuery.

How it works:

 
All you have to do is include the JavaScript file in the head of the page and it'll attach 2 classes to your body tag to say what browser and what version is being used so you've got 2 levels of granularity. Possible values are...

.browserIE
.browserIE6
.browserIE7
.browserIE8
.browserChrome
.browserChrome1
.browserSafari
.browserSafari1
.browserSafari2
.browserSafari3
.browserMozilla
.browserFirefox
.browserFirefox1
.browserFirefox2
.browserFirefox3
.browserOpera

If you need to detect any other browsers then it would be easy to modify the script.

All that happens automatically.

Usage example:

 
All you have to do is write your CSS selectors to use those classes where necessary, so let's say for example that you had an input textbox which looks correct in every browser except safari (quite common in my experience) and you want to position it 2 pixels lower in safari, all you have to do is set up the following 2 styles.

#myInput {background:black;} .browserSafari #myInput{background:black; position:relative; top:2px;} 
Pretty neat compared to other solutions. The script is < 1k minified and the browser detection only needs to be done once on page load, from that point on it's CSS selectors all the way.

Get the code:

 
  browserDetect.js (2k)
  browserDetect-min.js (0.9k)