Display Browser and Version

This is jQuery specific, and contains a bit of a hack/fix for dealing with Chrome. This works between jQuery 1.5.1 and jQuery 1.8.3. It's gone in jQuery 1.9. Presumably because it was used too improperly too frequently and it was hurting the web. Better to feature detect when possible.

var userAgent = navigator.userAgent.toLowerCase(),
    browser   = '',
    version   = 0;

$.browser.chrome = /chrome/.test(navigator.userAgent.toLowerCase());

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

// 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;
  browser = "Chrome";
}

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

// 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;
		browser = "Firefox"
	}
	// If not then it must be another Mozilla
	else {
	  browser = "Mozilla (not Firefox)"
	}
}

// Is this a version of Opera?
if ($.browser.opera) {
	userAgent = userAgent.substring(userAgent.indexOf('version/') + 8);
	userAgent = userAgent.substring(0,userAgent.indexOf('.'));
	version = userAgent;
	browser = "Opera";
}

// Now you have two variables, browser and version
// which have the right info

Comments

  1. User Avatar
    Batfan
    Permalink to comment#

    Interesting. Its showing Safari 533 from the stock Android browser.

    • User Avatar
      Ed Brandt
      Permalink to comment#

      I’m using Safari but the latest version of Safari is 5.0.3 (6533.19.4). Is the 533 referring to the version number or the 533 in the build number ?

    • User Avatar
      Batfan
      Permalink to comment#

      No idea, my friend. Not my snippet :)

    • User Avatar
      Florian
      Permalink to comment#

      Replace the code for Safari with the following and you’ll receive “Safari 5”:

      if ($.browser.safari) {
          userAgent = userAgent.substring(userAgent.indexOf('version/') + 8);
          userAgent = userAgent.substring(0, userAgent.indexOf('.'));
          version = userAgent;
          browser = "Safari";
      }
  2. User Avatar
    Appleseed
    Permalink to comment#

    K-Meleon is …. Mozilla (not Firefox) 0
    hehe

  3. User Avatar
    thomas
    Permalink to comment#

    I am not seeing how this populates to the browser-info-here id below the code? maybe im dumb

  4. User Avatar
    Chris
    Permalink to comment#

    @thomas

    $(‘#browser-info-here’).append(browser + ” ” + version);

  5. User Avatar
    Tom
    Permalink to comment#

    FYI, $.browser was dropped in jQuery 1.9

  6. User Avatar
    Vitali
    Permalink to comment#

    To detect the user browser, I use the script posted on quirksmode

  7. User Avatar
    oxygen
    Permalink to comment#

    it adds mozilla class to html however I have chrome browser! I dont understand.

  8. User Avatar
    Raj

    What about Mobile devices ?

  9. User Avatar
    Ludovic Urbain
    Permalink to comment#

    It is not “better” to use feature detect.

    100% of the time, you will need to fix browser specific quirks, and the only way to do that is to check for a browser, and version.

    5% of the time, you will need to check whether or not a certain feature is supported, and the best answer for that is indeed, feature detection.

    It’s like div, table, or whatever: It’s not because some people abused it that it automatically becomes a bad thing that you should avoid.

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-searchicon-staricon-tag