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?

Answers


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.


Need Your Help

Triangle wave shaped array in Python

python arrays numpy geometry

What is the most efficient way to produce an array of 100 numbers that form the shape of the triangle wave below, with a max/min amplitude of 0.5?

How to package libraries into my jar using Ant

java ant jar

My application relies on two external libraries, I have both in jar format and have added them to my classpath, making it possible to run my application within NetBeans.

C++ with Qt4 plugin development

c++ plugins interface qt4

Lately I have been playing around with the plugin framework provided by the Qt4 Framework, and it works perfectly. There is however one thing that I am unsure of.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.