One of these days every browser will act the same and support the same web standards. However, that's not today. With any sufficiently complicated web application, it's important to know what browser the user is running so you know what javascript functions are available or what CSS it supports. This tutorial will go through all the mechanisms available in JQuery to determine what browser and what version is being used.
At the highest level, JQuery offers a simple utility called browser that contains some simple flags to determine which one of the major browsers is currently being used - Safari, Opera, IE, or Mozilla.
$(document).ready(function(){
var browser;
if($.browser.mozilla)
browser = "Firefox";
else if($.browser.msie)
browser = "Internet Explorer";
else if($.browser.opera)
browser = "Opera";
else if($.browser.safari)
browser = "Safari";
else
browser = "Unknown";
$('#browserName').append(browser);
});
</script>
<body>
<span id="browserName">Your Browser: </span>
</body>
When you execute the code, the output should look something like below.
Your Browser:
After you know what browser is running, it might be nice to know its version. The browser object contains a property, version, which is a string containing this information. The version means different things to different browsers so you'll first have to determine the browser before the version will mean anything. Most of the time it's the version of the rendering engine being used - such as Gecko or Webkit.
Your Version:
The last resort is to use Javascript's navigator object to get the user agent string and figure it out yourself. This is not part of JQuery, it's just a property that should be supported by every browser running javascript.
Your User Agent:
As you can see, JQuery offers up enough information to cover most of the cases that exist in typical web development. I did find what looks to be a pretty nice plugin to JQuery that greatly extends its browser detection abilities called jQBrowser. It's worth a look if you need to detect more browsers than just the big four. That does it for this tutorial - leave questions or comments below.
12/11/2008 - 16:57
“One of these days every browser will act the same and support the same web standards.”
While I admire your optimism, I’m unsure if I think this day will ever come. Too many competing companies looking out for their own interests. I think the best we can hope for is one browser taking over a super majority of the market, forcing others to adopt their rendering quirks to compete at all, as web devs tailor their sites to the majority use case.
04/06/2012 - 17:06
Not yet....
02/03/2009 - 06:01
Thanks for putting this together. Code snippets like this are really helpful. For me, it's all about cheat sheets though. I always have my iPhone with me, so I keep them there for handy reference - even offline. The best jQuery cheat sheet I've found so far is from these guys:
http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=302090867&mt=8
They also have great cheat sheets for CSS and PHP. Hope this is helpful.
04/18/2009 - 13:58
How can i find IE6 and IE7 separately to fix pop-up alignment issues at the time of positioning.
Please help me on this
Thank you
10/13/2011 - 23:34
use this
if($.browser.msie.){
if ($.browser.version == 6){
//code for ie 6
}
if ($.browser.version >= 7){
//for ie 7 and greater
}
}
07/16/2010 - 08:19
With my IE , $.browser.msie does the job, while $.msie returns 'unknown'.
07/16/2010 - 08:42
Thanks for finding that - there was a bug in the code. It should have been $.browser.msie.