jQuery API

jQuery.browser

jQuery.browser Returns: Map

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

  • version added: 1.0jQuery.browser

The $.browser property provides information about the web browser that 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 may 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-latest.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.


  var ua = $.browser;
  if ( ua.mozilla && ua.version.slice(0,3) == "1.9" ) {
    alert( "Do stuff for firefox 3" );
  }

Example: Set a CSS property that's specific to a particular browser.


 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, 8.0
  • Mozilla/Firefox/Flock/Camino: 1.7.12, 1.8.1.3, 1.9
  • Opera: 10.06, 11.01
  • Safari/Webkit: 312.8, 418.9

Note that IE8 claims to be 7 in Compatibility View.

Examples:

Example: Returns the version number of the rendering engine used by the user's current browser. For example, FireFox 4 returns 2.0 (the version of the Gecko rendering engine it utilizes).

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

<script>
$("p").html( "The version number of the rendering engine your browser uses is: <span>" +
                $.browser.version + "</span>" );
</script>

</body>
</html>

Demo:

Example: Alerts the version of IE's rendering engine that is being used:


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

Example: Often you only care about the "major number," the whole number, which you can get by using JavaScript's built-in parseInt() function:


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

Support and Contributions

Need help with jQuery.browser or have a question about it? Visit the jQuery Forum or the #jquery channel on irc.freenode.net.

Think you've discovered a jQuery bug related to jQuery.browser? Report it to the jQuery core team.

Found a problem with this documentation? Report it to the jQuery API team.

* All fields are required
  • jsherk
    Thanks edeiller ... I used your code!

    I just added an extra var browser_name='whatever' to each if and returned an array with brower name and version.
  • 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.
  • Asd
    it's correct, but it's Chrome not Safari...and i wanna read "Chrome"...not "Safari"...