Detecting the browser engine and version with jQuery

While you ideally shouldn’t use browser detection to choose whether or not to render something in a particular fashion, jQuery does provide the capability to work out which browser rendering engine and version is being used with $.browser. There is also $.support which provides information about what the rendering engine supports and I will look at that in a later post.

Working example

A piece of Javascript directly after this paragraph will show the browser flags that jQuery detects and the version. If you are reading this in a feed reader then this will not work and you will need to click through to read this article in a web browser.

Warning: $.browser is deprecated

The $.browser property was deprecated in jQuery 1.3 but there are no immediate plans to remove it from jQuery. As I noted in the first paragraph, ideally it shouldn’t be used anyway but there may be times for debugging or logging that it may be useful to record this information.

$.browser properties

jQuery’s $.browser has several true/false flags which indicate which browser engine is being used. These can be tested in conditional statements or the values dispayed in an each loop.

The available flags are:

• mozilla
• msie
• opera
• safari
• webkit (added in jQuery 1.4)

For jQuery versions < 1.4 Chrome and Safari are flagged as safari; in jQuery 1.4 they are both flagged as both safari and webkit. In future versions they will presumably instead only be flagged as webkit.

There is also a "version" property which reports the rendering engine’s version number. This is not the same as the browser’s version number. For example, for Chrome version 4.0.249.78 $.browser.version will be 532.5; for Firefox 3.5.7 $.browser.version will be 1.9.1.7

Using $.browser in a conditional

The following example does one thing or another depending on the flag that is set:

if($.browser.webkit) {
    // do something
}
else if($.browser.safari) {
    // do something
}
else if($.browser.opera) {
    // do something
}
else if($.browser.msie) {
    // do something
}
else if($.browser.mozilla) {
    // do something
}

Using $.browser with $.each

To loop through all the properties in $.browser do the following:

$.each($.browser, function(key, val) {
    document.write(key + " : " + val + "<br />");
});

This is what is done in the working example at the start of this post. Instead of writing it to the document the information could be put into a string and sent along with an AJAX request etc.