Sunday, May 10, 2009

Detecting Useragent Using Jquery

Browser detection might seem, at first, like a logical way to deal with browser differences. After all, it’s easy to say: “I know what the set of capabilities of browser X are, so testing for the browser makes perfect sense, right?” But browser detection is full of pitfalls and problems.Browsers identify themselves by setting a request header known as the user agent string. Parsing this string isn’t for the faint-hearted. In addition, many browsers now allow their users to spoof this string, so we can’t even believe what it tells us after we do parse it! A JavaScript object named navigator gives us a partial glimpse into the user agent information, but even it has browser differences. We almost need to do browser detection in order to do browser detection!

jQuery provides a set of flags that we can use for branching that are set up when the library is loaded, making them available even before any ready handlers have executed. They are defined as properties of an object instance with a reference of $.browser. The formal syntax for this flag set is as follows:

$.browserDefines a set of flags that can be used to discover to which broad set of browser families thecurrent user agent belongs. These flags are as follows:

msie—Set to true if the user agent header identifies the browser as Microsoft Internet Explorer.

mozilla—Set to true if the user agent header identifies the browser as any Mozillabased browser. This includes browsers such as Firefox, Camino, and Netscape.

safari—Set to true if the user agent header identifies the browser as Safari or any Safari-based browser.

opera—Set to true if the user agent header identifies the browser as Opera.

version—Set to the version number of the rendering engine for the browser.

Note that these flags don’t attempt to identify the specific browser that’s being used; jQuery classifies a user agent based upon which family of browsers it belongs to. Browsers within each family will sport the same sets of characteristics; specific browser identification should not be necessary. The vast majority of commonly used, modern browsers will fall into one of these four browser families.

The version property deserves special notice because it’s not as handy as we might think. The value set into this property isn’t the version of the browser (as we might initially believe) but the version of the browser’s rendering engine. For example, when executed within Firefox 2.0.0.2, the reported version is 1.8.1.6— the version of the Gecko rendering engine. This value is handy for distinguishing between IE6 and IE7, containing 6.0 and 7.0 respectively.

We mentioned earlier that there are times when we can’t fall back on object detection and must resort to browser detection. One example of such a situation is when the difference between browsers isn’t that they present different object classes or different methods but that the parameters passed to a method are interpreted differently across the browser implementations. In such a case, there’s no object to perform detection on.