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
  • amezghal

    on chrome
    alert($.browser.webkit)

    ==> false

  • http://www.learningjquery.com/ Karl Swedberg

    Odd. On Chrome 5.0.307.5 dev (Mac) $.browser.webkit == true

  • Anonymous

    you have to do it manually like this: /chrome/.test( navigator.userAgent.toLowerCase() )

  • http://twitter.com/Danbo Dan Atkinson

    Chrome (Windows XP) 5.0.342.2 dev

    Browser info:
    webkit : true
    version : 533.2
    safari : true

  • Anonymous

    Chrome is a webkit browser… always has been.

  • delta16

    that is correct becouse , the Google Chrome browser is fully based on Wbkit , just like Safari.

  • 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!’);
    }

  • http://mover-st.livejournal.com Sergey Shcherbakov

    chrome = navigator.userAgent.toLowerCase().indexOf(‘chrome’) > -1;

  • http://www.quotebook24.com 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 bug where you had to use css hack for safari and chrome:

    @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…

  • nan

    if you simply want to get the browser name, you can use this:

    var browser = jQuery.uaMatch(navigator.userAgent).browser;

  • http://twitter.com/edeiller edeiller

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

  • Tonci Damjanic

    You should use the parseFloat() function, as $.browser.version contains a String instance actually.

    if($.browser.msie && parseFloat($.browser.version) < 7){
    //do other stuff
    return;
    }

  • Kaushik Shah

    Weird, on Chrome (ubuntu, 5.0.375.99 beta). $.browser.safari = true, while $.browser.webkit = undefined

  • http://twitter.com/BennyBorn Benny Born

    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;

  • 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

  • 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.

  • Asd

    it's correct, but it's Chrome not Safari…and i wanna read “Chrome”…not “Safari”…