Is this any good? Detects and target specific browser CSS using Javascript

Question

im just practicing Javascript and concocted a Javascript code that detects and creates specific class name for different browsers so i wouldnt need anymore CSS hacks. is it any good?

var browser = navigator.userAgent;

if (browser.match("OPR")) {
    $("body").addClass("opera");
}
else if (browser.match("Firefox")) {
    $("body").addClass("firefox");
}
else if (browser.match("Safari")) {
    if (browser.match("Chrome")) {
        $("body").addClass("chrome");
    }
    else {
        $("body").addClass("safari");
    }
}

With all due respect, I don't get the idea of replacing browser specific prefixes inside one selector rule with multiple selector rules containing one prefix each. — matewka, Nov 08 '13 at 11:53
"*Is this any good?*" Probably not. See http://stackoverflow.com/questions/1294586/browser-detection-versus-feature-detection — cmbuckley, Nov 08 '13 at 11:53

Richard A. · Answer 1 · 2013-11-08T12:05:02.627

This works, yes, but as the old saying goes: don't re-invent the wheel :)

The world and his wife is using Modernizr these days... http://modernizr.com/

Include that in your project and it will apply classes all over the place to show you not only which browser is being served, but the version too. Also, it will tell you if JavaScript is enabled at all, which allows you to cover that use-case too.

Also, as others have stated, nowadays we check for features instead of browsers, e.g:

if (Modernizr.audio) { //play sounds }

That way, we can test a browsers capability to perform a task, rather than having to know which browser/platform/configuration supports a certain feature. Neato.

score 1 · Answer 2 · answered Nov 08 '13 at 11:59

1

As per what Richard A said, the world has moved on from Browser Checking, and more onto Feature Checking

http://msdn.microsoft.com/en-us/magazine/hh475813.aspx

answered Nov 08 '13 at 11:59

Stuart.Sklinar

3,683
4
35
89

score 1 · Answer 3 · answered Nov 08 '13 at 11:59

1

Browser sniffing in general is a bad idea. The problem with what you're doing is if anyone visits your website with a browser which is not mentioned here (like the Android default browser or one of the niche browsers Microsoft offers you to use if you've reinstalled your PC), he will not get any body CSS.

AND if you have someone with an older version of a supported browser (say he's still using XP and IE6), that person is going to get the same CSS as someone using IE11 in your case.

And if someone has JS disabled (rare these days, but can happen), he also doesn't get a body CSS.

answered Nov 08 '13 at 11:59

Nzall

3,439
5
29
59

Thank You for the lengthy reply. Really appreciate it. So i guess im back to the drawing board. hehe. But what if i just use my code just to fix little discrepancies between browsers like added margins/paddings? is that possible? – Carlo Mercado Nov 08 '13 at 12:08
I would only do browser sniffing if the sniffing is crucial in providing every kind of user with a comparable experience. In this case, small margin or padding differences are not vital, unless they mean that the page becomes harder to use because of it. – Nzall Nov 08 '13 at 12:20

score 0 · Answer 4 · answered Nov 08 '13 at 13:37

Despite what everybdoy says about feature sniffing, knowing what browser you're dealing with still has its uses, especially when it comes to the IEs. Personally I've found this conditional comments trick very handy:

<!doctype html>
<!--[if lt IE 7 ]>
<html class="no-js ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]>
<html class="no-js ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]>
<html class="no-js ie ie8" lang="en"> <![endif]-->
<!--[if IE 9 ]>
<html class="no-js ie ie9" lang="en"> <![endif]-->
<!--[if (gte IE 10)|!(IE)]>
<html class="no-js">
<!--<![endif]-->

So you can add exceptions to your CSS like

.ie .nav {

}

Is this any good? Detects and target specific browser CSS using Javascript

4 Answers4