Grow your CSS skills. Land your dream job.

Last updated on:

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. Batfan
    Permalink to comment#

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

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

    • Batfan
      Permalink to comment#

      No idea, my friend. Not my snippet :)

    • 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. Appleseed
    Permalink to comment#

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

  3. thomas
    Permalink to comment#

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

  4. Chris
    Permalink to comment#

    @thomas

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

  5. Tom
    Permalink to comment#

    FYI, $.browser was dropped in jQuery 1.9

  6. Vitali
    Permalink to comment#

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

  7. oxygen
    Permalink to comment#

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

  8. Raj

    What about Mobile devices ?

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

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".