Browser & OS as body class

I would like to have the OS and the Browser in the body class. I need that for pixelperfect styling, because the fonts do not behave the same way in different OS / Browser configurations. After some googling and experimenting. The only way i could think of to do this was to use an indexOf...

var OSName="Unknown OS";
if (navigator.appVersion.indexOf("Win")!=-1) OSName="Windows";
if (navigator.appVersion.indexOf("Mac")!=-1) OSName="MacOS";
if (navigator.appVersion.indexOf("X11")!=-1) OSName="UNIX";
if (navigator.appVersion.indexOf("Linux")!=-1) OSName="Linux";

var agt=navigator.userAgent.toLowerCase();
if (agt.indexOf("opera") != -1) return 'Opera';
if (agt.indexOf("firefox") != -1) return 'Firefox';
if (agt.indexOf("safari") != -1) return 'Safari';
if (agt.indexOf("webkit") != -1) return 'Webkit';
if (agt.indexOf("msie") != -1) return 'Internet Explorer';
if (agt.indexOf("mozilla/5.0") != -1) return 'Mozilla';

i think its not a very beautyful solution. Is there some regex that could do this? Or is there any faster way to do this开发者_Go百科?

You could use regex, but it wouldn't make it any prettier.

Basically, scanning user agent strings for browser/os/version is never going to be beautiful.

Here is something a little prettier with jQuery...

// Add some classes to body for CSS hooks

// Get browser
$.each($.browser, function(i) {
    $('body').addClass(i);
    return false;  
});


// Get OS
var os = [
    'iphone',
    'ipad',
    'windows',
    'mac',
    'linux'
];

var match = navigator.appVersion.toLowerCase().match(new RegExp(os.join('|')));
if (match) {
    $('body').addClass(match[0]);
};

This doesn't quite give you the same classes as above, but enough to differentiate different OS and browser.

For example, you could target Firefox on Windows with...

body.windows.mozilla {
    background: blue;
}

See it!

Or use a plugin.

for the browser info, if using jQuery, there is $.browser

http://api.jquery.com/jQuery.browser/