CODEWITHSUNDEEP
javascriptcss
Simon
Simon

Reputation: 5247

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.

Upvotes: 2

Views: 7906

Answers (7)

Greg Perham
Greg Perham

Reputation: 1857

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

Upvotes: 0

neel upadhyay
neel upadhyay

Reputation: 348

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

Upvotes: 2

campsjos
campsjos

Reputation: 1405

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.

Upvotes: 0

Techgration
Techgration

Reputation: 517

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/

Upvotes: 2

DrStrangeLove
DrStrangeLove

Reputation: 11567

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

Upvotes: -1

Jason
Jason

Reputation: 52527

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.

Upvotes: 2

Marc B
Marc B

Reputation: 360772

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

Upvotes: -4

Related Questions