Home / Detecting the browser engine and version with jQuery

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 $.browser.version will be 532.5; for Firefox 3.5.7 $.browser.version will be

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.