jQuery API

jQuery.browser

Categories: Properties > Properties of the Global jQuery Object | Utilities

Contents:

jQuery.browser Returns: Map

Description: We recommend against using this property; please try to use feature detection instead (see jQuery.support). jQuery.browser will be moved to a plugin in a future release of jQuery. Contains flags for the useragent, read from navigator.userAgent.

  • version added: 1.0jQuery.browser

The $.browser property allows us to detect which web browser is accessing the page, as reported by the browser itself. It contains flags for each of the four most prevalent browser classes (Internet Explorer, Mozilla, Webkit, and Opera) as well as version information.

Available flags are:

  • webkit (as of jQuery 1.4)
  • safari (deprecated)
  • opera
  • msie
  • mozilla

This property is available immediately. It is therefore safe to use it to determine whether or not to call $(document).ready(). The $.browser property is deprecated in jQuery 1.3, and its functionality will be moved to a team-supported plugin in a future release of jQuery.

Because $.browser uses navigator.userAgent to determine the platform, it is vulnerable to spoofing by the user or misrepresentation by the browser itself. It is always best to avoid browser-specific code entirely where possible. The $.support property is available for detection of support for particular features rather than relying on $.browser.

Examples:

Example: Show the browser info. 

<!DOCTYPE html>
<html>
<head>
  <style>
  p { color:green; font-weight:bolder; margin:3px 0 0 10px; }
  div { color:blue; margin-left:20px; font-size:14px; }
  span { color:red; }
  </style>
  <script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body>
  <p>Browser info:</p>
<script>
    jQuery.each(jQuery.browser, function(i, val) {
      $("<div>" + i + " : <span>" + val + "</span>")
                .appendTo(document.body);
    });</script>

</body>
</html>

Demo:

Example: Returns true if the current useragent is some version of Microsoft's Internet Explorer. 

$.browser.msie

Example: Alerts "this is webkit!" only for webkit browsers 

if ($.browser.webkit) {
    alert("this is webkit!");
 }

Example: Alerts "Do stuff for firefox 3" only for firefox 3 browsers. 

jQuery.each(jQuery.browser, function(i, val) {
   if(i=="mozilla" && jQuery.browser.version.substr(0,3)=="1.9")
      alert("Do stuff for firefox 3")
 });

Example: Set a CSS property to specific browser. 

jQuery.each(jQuery.browser, function(i) {
   if($.browser.msie){
      $("#div ul li").css("display","inline");
   }else{
      $("#div ul li").css("display","inline-table");
   }
 });

jQuery.browser.version Returns: String

Description: The version number of the rendering engine for the user's browser.

  • version added: 1.1.3jQuery.browser.version

Here are some typical results:

  • Internet Explorer: 6.0, 7.0
  • Mozilla/Firefox/Flock/Camino: 1.7.12, 1.8.1.3, 1.9
  • Opera: 9.20
  • Safari/Webkit: 312.8, 418.9

Note that IE8 claims to be 7 in Compatibility View.

Examples:

Example: Returns the browser version. 

<!DOCTYPE html>
<html>
<head>
  <style>
  p { color:blue; margin:20px; }
  span { color:red; }
  </style>
  <script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body>
  <p>
  </p>
<script>

    $("p").html("The browser version is: <span>" +
                jQuery.browser.version + "</span>");
</script>

</body>
</html>

Demo:

Example: Alerts the version of IE that is being used 

if ( $.browser.msie ) {
  alert( $.browser.version );
}

Example: Often you only care about the "major number," the whole number. This can be accomplished with JavaScript's built-in parseInt() function: 


if (jQuery.browser.msie) {
  alert(parseInt(jQuery.browser.version));
}

User Contributions

  • Support requests, bug reports, and off-topic comments will be deleted without warning.

  • Please do post corrections or additional examples for jQuery.browser below. We aim to quickly move corrections into the documentation.
  • If you need help, post at the forums or in the #jquery IRC channel.
  • Report bugs on the bug tracker or the jQuery Forum.
  • Discussions about the API specifically should be addressed in the Developing jQuery Core forum.
  • Thomtomdup

    I have add the google chrome detection in jquery.browser :
    You add juste this in Useragent RegExp list :

    // Useragent RegExp
    userAgent = navigator.userAgent,
    rwebkit = /(webkit)[ \/]([\w.]+)/,
    rchrome = /(chrome)[ \/]([\w.]+)/,
    ropera = /(opera)(?:.*version)?[ \/]([\w.]+)/,
    rmsie = /(msie) ([\w.]+)/,
    rmozilla = /(mozilla)(?:.*? rv:([\w.]+))?/,


    You modify uaMatch function :

    uaMatch: function( ua ) {
    ua = ua.toLowerCase();

    var match = rchrome.exec( ua ) || rwebkit.exec( ua ) ||
    ropera.exec( ua ) ||
    rmsie.exec( ua ) ||
    ua.indexOf("compatible") < 0 && rmozilla.exec( ua ) ||
    [];
    alert(match[2]);
    return { browser: match[1] || "", version: match[2] || "0"};
    },

    browser: {}
    });

    If you want have the browser language, you modify the return data of uaMatch function like this :
    return { browser: match[1] || "", version: match[2] || "0", language: navigator.language? navigator.language : navigator.userLanguage || "" };

    and also modify this :
    browserMatch = jQuery.uaMatch( userAgent );
    if ( browserMatch.browser ) {
    jQuery.browser[ browserMatch.browser ] = true;
    jQuery.browser.version = browserMatch.version;
    jQuery.browser.language = browserMatch.language;
    }

    That's all.
    Thanks
  • If you want to know if its really a safari and not a chrome put this hack into your code

    $.browser.safari = ( $.browser.safari && /chrome/.test(navigator.userAgent.toLowerCase()) ) ? false : true;
  • Kaushik Shah
    Weird, on Chrome (ubuntu, 5.0.375.99 beta). $.browser.safari = true, while $.browser.webkit = undefined
  • function detectBrowserVersion(){
    var userAgent = navigator.userAgent.toLowerCase();
    $.browser.chrome = /chrome/.test(navigator.userAgent.toLowerCase());
    var version = 0;

    // Is this a version of IE?
    if($.browser.msie){
    userAgent = $.browser.version;
    userAgent = userAgent.substring(0,userAgent.indexOf('.'));
    version = userAgent;
    }

    // Is this a version of Chrome?
    if($.browser.chrome){
    userAgent = userAgent.substring(userAgent.indexOf('chrome/') +7);
    userAgent = userAgent.substring(0,userAgent.indexOf('.'));
    version = userAgent;
    // If it is chrome then jQuery thinks it's safari so we have to tell it it isn't
    $.browser.safari = false;
    }

    // Is this a version of Safari?
    if($.browser.safari){
    userAgent = userAgent.substring(userAgent.indexOf('safari/') +7);
    userAgent = userAgent.substring(0,userAgent.indexOf('.'));
    version = userAgent;
    }

    // Is this a version of Mozilla?
    if($.browser.mozilla){
    //Is it Firefox?
    if(navigator.userAgent.toLowerCase().indexOf('firefox') != -1){
    userAgent = userAgent.substring(userAgent.indexOf('firefox/') +8);
    userAgent = userAgent.substring(0,userAgent.indexOf('.'));
    version = userAgent;
    }
    // If not then it must be another Mozilla
    else{
    }
    }

    // Is this a version of Opera?
    if($.browser.opera){
    userAgent = userAgent.substring(userAgent.indexOf('version/') +8);
    userAgent = userAgent.substring(0,userAgent.indexOf('.'));
    version = userAgent;
    }
    return version;
    }
  • nan
    if you simply want to get the browser name, you can use this:

    var browser = jQuery.uaMatch(navigator.userAgent).browser;
  • k6
    if ( $.browser.webkit && !$.browser.opera && !$.browser.msie && !$.browser.mozilla ) {
    var userAgent = navigator.userAgent.toLowerCase();
    if ( userAgent.indexOf("chrome") === -1 ) {
    alert("safari");
    }
    }

    I needed that because it seems on windows chrome has fixed the <button and="" bug="" chrome:<br="" css="" for="" hack="" had="" safari="" to="" use="" where="" you="">
    @media screen and (-webkit-min-device-pixel-ratio:0) {
    .buttons .button01 { position: relative; }
    .buttons .button01 span { margin: -1px -3px 0 0; min-width: 130px; }
    }

    Now, because chrome is ok by default, it brakes chrome. So sadly, I'm going to use safari detection to add class="safari" to body tag...</button>
  • chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
  • rwheale
    Chrome is a webkit browser... always has been.
  • pockata
    As of Google Chrome 5.0.307.11 beta (Linux tested only) you can't tell the difference between Safari and Chrome !!!
  • pockata
    you have to do it manually like this: /chrome/.test( navigator.userAgent.toLowerCase() )
  • amezghal
    on chrome
    alert($.browser.webkit)

    ==> false
  • Chrome (Windows XP) 5.0.342.2 dev

    Browser info:
    webkit : true
    version : 533.2
    safari : true
  • Odd. On Chrome 5.0.307.5 dev (Mac) $.browser.webkit == true
  • Patrick
    On my Windows XP, with Chrome and Safari installed, I noticed that Google Chrome gives me this user agent:
    "Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/532.5 (KHTML, like Gecko) Chrome/4.1.249.1064 Safari/532.5"

    This means that if you try to detect Safari only, you'll have to check that it doesn't contain "Chrome" :

    // A quick solution without using regexp (to speed up a little).
    var userAgent = navigator.userAgent.toString().toLowerCase();
    if ((userAgent.indexOf('safari') != -1) && !(userAgent.indexOf('chrome') != -1)) {
    alert('We should be on Safari only!');
    }
  • delta16
    that is correct becouse , the Google Chrome browser is fully based on Wbkit , just like Safari.