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?

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?

• javascript
• jquery

• If you really want to resort to browser sniffing, good luck - this will fail anyway, as the rendering also depends on installed fonts and browser version (most notably IE6 vs IE7 vs IE8 vs the uping IE9). If you need a pixel-perfect site, HTML is the wrong tool for this - make your site a huge image instead, that's the only way to be sure (it will have numerous other problems, but it will be pixel-perfect). Also, UA spoofing. – Piskvor left the building Commented Dec 1, 2010 at 10:16
• the problem for me is more the OS then the Browser. The textrendering in MacOS and Windows is very different. I'm always surprised how ugly the fonts look in windows. But at least i can control the line-height the letterspacing and the fontsize differently. But its totally possible to do it pixelperfect if the designer is web experienced – meo Commented Dec 1, 2010 at 10:28

2 Answers 2

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./jQuery.browser/