javascript - Use JS to add browser version to <html> or <body> as class

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.

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.

Share Improve this question edited May 16, 2011 at 22:24 asked May 16, 2011 at 22:06 Simon 5,2478 gold badges45 silver badges66 bronze badges

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

Add a ment |

7 Answers 7

Sorted by: Reset to default 2

For IE, you can use conditional ments 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.

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/2010/07/07/browser-detection-with-jquery/

 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");
    }

In my case I needed to add a class only for Chrome, not because feature patibility 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, plicated and the author remends to do not use it but it worths a look to all its features.

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());
});

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

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

Programmer puzzle solving

javascript - Use JS to add browser version to <html> or <body> as class - Stack Overflow

7 Answers 7

Articles related to this article

comment list (0)