Use JS to add browser version to or as class

Question

I'm trying to find a tried and tested script that sniffs the browser version and adds a suitably named class to the <html> or the <body> tags... like <html class="ie7"> or <html class="ff4"> or <html class="safari4">.

I don't mind if it's "firefox4" or "ff4" or "firefox_4"... just as long as I can use the class to scope my css.

I could write a script to do this myself but I was wondering if there was a widely used one out there...

Thanks.

Do you want it to detect the browser version too? Or just put in the class attribute into the html tag? — Techgration, May 16 '11 at 22:12
I need to detect the version and add an appropriate version class to the tag. — Simon, May 16 '11 at 22:25

score 2 · Answer 1 · answered Mar 24 '17 at 09:56

 var BrowserDetect = {
        init: function () {
            this.browser = this.searchString(this.dataBrowser) || "Other";
            this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) || "Unknown";
        },
        searchString: function (data) {
            for (var i = 0; i < data.length; i++) {
                var dataString = data[i].string;
                this.versionSearchString = data[i].subString;

                if (dataString.indexOf(data[i].subString) !== -1) {
                    return data[i].identity;
                }
            }
        },
        searchVersion: function (dataString) {
            var index = dataString.indexOf(this.versionSearchString);
            if (index === -1) {
                return;
            }

            var rv = dataString.indexOf("rv:");
            if (this.versionSearchString === "Trident" && rv !== -1) {
                return parseFloat(dataString.substring(rv + 3));
            } else {
                return parseFloat(dataString.substring(index + this.versionSearchString.length + 1));
            }
        },

        dataBrowser: [
            {string: navigator.userAgent, subString: "Edge", identity: "MS Edge"},
            {string: navigator.userAgent, subString: "MSIE", identity: "Explorer"},
            {string: navigator.userAgent, subString: "Trident", identity: "Explorer"},
            {string: navigator.userAgent, subString: "Firefox", identity: "Firefox"},
            {string: navigator.userAgent, subString: "Opera", identity: "Opera"},  
            {string: navigator.userAgent, subString: "OPR", identity: "Opera"},  

            {string: navigator.userAgent, subString: "Chrome", identity: "Chrome"}, 
            {string: navigator.userAgent, subString: "Safari", identity: "Safari"}       
        ]
    };

    BrowserDetect.init();
    document.write("You are using <b>" + BrowserDetect.browser + "</b> with version <b>" + BrowserDetect.version + "</b>");

    var bv= BrowserDetect.browser;
    if( bv == "Chrome"){
        $("body").addClass("chrome");
    }
    else if(bv == "MS Edge"){
     $("body").addClass("edge");
    }
    else if(bv == "Explorer"){
     $("body").addClass("ie");
    }
    else if(bv == "Firefox"){
     $("body").addClass("Firefox");
    }

score 2 · Accepted Answer · answered May 16 '11 at 22:11

2

For IE, you can use conditional comments like how HTML5 Boilerplate does it. For the others, there are some deprecated methods in jQuery that you can exploit to determine what browser and browser version they're using, namely jQuery.browser.

And of course, as others are mentioning, you can use Modernizr, although I don't think it does sniffing of browser type and version exactly how you want. I'm pretty sure it just does feature detection.

answered May 16 '11 at 22:11

Jason

51,583
38
133
185

I normally follow this practice but I want to target no-IE browsers too. – Simon May 16 '11 at 22:25
1

this does target non-IE browsers. Read the jQuery.browser link. That does exactly what you want. – Jason May 16 '11 at 22:27
I'm looking for a prepared and maintained script that does it for me. I don't want to write a load of switches round jQuery.browser. I like they was Modernizr works but it doesn't add the critical class I want. Thanks. – Simon May 16 '11 at 22:31
@simon i don't think there's any "main script" people use to do this, but if you wanted to try it yourself, it's not a large amount of code. you could probably do it in 10 lines or fewer. – Jason May 16 '11 at 22:41
Unfortunately, jQuery.browser has been removed since this answer was posted and accepted. – Greg Perham May 26 '20 at 20:22

Techgration · Answer 3 · 2011-05-17T20:15:31.447

2

JQuery does browser detection. I would do something like this to detect IE.

if($.browser.msie)
{
    if($.browser.version)
    {
         $('html').addClass('ie' + ($.browser.version));

    }
}

And of course you could check for Mozilla along with a version number in a similar fashion.

For a further explanation on it, see http://webhole.net/2010/07/07/browser-detection-with-jquery/

edited May 17 '11 at 20:15

answered May 17 '11 at 16:55

Techgration

516
4
16

1

The $.browser method has been removed as of jQuery 1.9. – Jinu Kurian Apr 16 '18 at 09:51

score 1 · Answer 4 · answered May 16 '11 at 22:11

1

My strong suggestion is to use well-known and proof libs as Modernizr to do that for you.

answered May 16 '11 at 22:11

Z. Zlatev

4,757
1
33
37

score 1 · Answer 5 · answered May 16 '11 at 22:11

1

Check out Modernizr. It does that plus a whole lot more!

answered May 16 '11 at 22:11

Code Maverick

20,171
12
62
114

1

I've just checked and Modernizr looks promising but it doesn't add the browser version details which is what I'm specifically after. Thanks. – Simon May 16 '11 at 22:20
It's ie worth mentioning specific version. Anything else is quite common among modern browsers or taken care of Modernizr's classifiers. – Z. Zlatev May 16 '11 at 22:36
I don't know your specific situation, but you should never be writing code that is browser specific. You should write code that is feature specific and that is why Modernizr should be used. It's the best out there. It utilizes YepNopeJs, as well as, IE Shim for HTML5 support. – Code Maverick May 16 '11 at 23:15
Modernizr doesn't appear to specifically address what Simon is trying to do. Although it does look pretty awesome. – Techgration May 17 '11 at 18:51
Thanks for the -1. The point is that feature detection is greater than browser detection. Why are you trying to detect the browser version? To implement some feature that browser does. Well instead of detecting the browser, you should simply detect that feature, no matter what browser. If the feature is there, it's there. So, it doesn't make any sense to browser sniff. – Code Maverick May 17 '11 at 18:58

score 0 · Answer 6 · edited May 23 '17 at 11:46

In my case I needed to add a class only for Chrome, not because feature compatibility but for a bug with background-position: fixed, so I "solved" it using this code from @Jonathan Marzullo and adding some CSS directives only for this browser:

var isChromium = window.chrome,
    vendorName = window.navigator.vendor,
    isOpera = window.navigator.userAgent.indexOf("OPR") > -1;
if(isChromium !== null && isChromium !== undefined && vendorName === "Google Inc." && isOpera == false) {
    // is Google chrome 
    $('body').addClass('chrome');
}

This is an example for how you can do a concrete browser detection task with few lines of code, but if you need a powerful and fully mantained script that gives you all the information about the user browser, O.S. and device you can imagine, this is WichBrowser.

Its heavy, complicated and the author recommends to do not use it but it worths a look to all its features.

score 0 · Answer 7 · answered May 26 '20 at 20:22

0

Found this tutorial that does exactly what the OP wants using Detect.js and jQuery.

jQuery(function( $ ){
    var ua = detect.parse(navigator.userAgent);
    $('html').addClass(ua.browser.family.toLowerCase());
});

answered May 26 '20 at 20:22

Greg Perham

1,835
1
17
26

score -1 · Answer 8 · answered May 16 '11 at 22:14

-1

var  rootElement = document.documentElement;
rootElement.className += ' ie7';

answered May 16 '11 at 22:14

DrStrangeLove

11,227
16
59
72

1

I need to do the detection too... for all browser versions. – Simon May 16 '11 at 22:25

score -3 · Answer 9 · answered May 16 '11 at 22:10

-3

In jquery, it's as simple as:

$('html').addClass('ie7');

In vanilla Javascript:

var h = document.getElementsByTagName('html')[0];
h.className += ' ie7'; // note the preceding space

answered May 16 '11 at 22:10

Marc B

356,200
43
426
500

4

i think he's trying to do sniffing, not just adding of classes – Jason May 16 '11 at 22:11

Use JS to add browser version to or as class

9 Answers9