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

Order by a field containing Numbers and Letters

sql delphi delphi-xe2 paradox

I need to extract data from an existing Padadox database under Delphi XE2 (yes, i more than 10 years divide them...).

Mysql query not working with WHERE BETWEEN

mysql where between

I was trying to get some data from my database, however I am currently only getting errors.

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.