Inside Technique : Browser Detection
By Scott Isaacs

Advanced scripting that targets multiple browser vendors and releases often requires coding to each specific browser. We introduce two techniques for detecting the browser version or support for a particular feature: explicit user agent checking and capabilities detection.

Explicit Version Checking

You can detect the type of browser based on its UA (user agent) string. Every browser release including different platforms has a unique user agent and version string (simplified UA string) allowing you to target code for any specific version or platform. The chart below shows the version string for recent windows explorer and navigator releases. These strings have a well-defined format that is maintained from release to release.

Browser		appVersion String
Internet Explorer 3.02 Win95		2.0 (compatible; MSIE 3.02; Windows 95)
Internet Explorer 4.01 Win95		4.0 (compatible; MSIE 4.01; Windows 95)
Internet Explorer 4.01 NT		4.0 (compatible; MSIE 4.01; Windows NT)
Netscape Navigator 4.04 (Win95)		4.04 [en] (Win95; I; Nav)
Netscape Navigator 4.04 (WinNT)		4.04 [en] (WinNT; I; Nav)

The most common operation on the version string is to access the actual major version number (eg., 4 for 4.01). The easiest way to access the version number for the browser is to convert the appVersion property to an integer. When converting a string to an integer, JavaScript automatically removes any integers that exist in a string's prefix.

  var version = parseInt(navigator.appVersion) 
  // Returns 4 for 4.x browsers

The second most common operation is to determine whether the browser is Internet Explorer or Netscape Navigator. This is easily accomplished by checking the appVersion for the identifying string ("MSIE" for explorer, "Nav" for Navigator). Below is simple code that checks if the browser is Navigator or Explorer:

  var isIE = navigator.appVersion.indexOf("MSIE")>0
  var isNav = navigator.appVersion.indexOf("Nav")>0

  // Is it IE or Nav and atleast version 4.0
  var isIE4 = isIE && version>=4  
  var isNav4 = isNav && version>=4

You can continue with the same technique to test for platform (Win95, WinNT, PPC, etc), and so on allowing you to target code from a broad class of browsers to a specific brand, version, and platform.

This technique is the most reliable way to target browsers with different scripts but it can also be the most difficult to maintain. You may need to understand the complete workings of each browser version. However, where we find this technique most useful is when different browsers and platforms interpret the same commands differently requiring you to code around them (for example, a bug in a particular version or platform).

In most cases, you can distinguish between browsers based on their capabilities. This approach, called Capabilities Detection, creates much simpler scripts and in many cases is sufficient for distinguishing between different browwsers.

Capabilities Detection

Capabilities Detection allows you to use features in the JavaScript language to detect browser capabilities for a particular object or method. Every object in JavaScript is an associative array. This means that every object is an array and every property, method, and event on that object takes up a slot in the array. This means you can use JavaScript's array lookup semantics to access any member of an object: document[all]==document.all.

In addition, every object can dynamically grow with new members and tested for any members existance. This allows you to test for the existance of any member in the object model, simply by checking if the member is exposed in the array. The easiest way to understand this is to look at a simple code fragment that tests for the existance of the all collection. The all collection is currently only supported by Internet Explorer 4.0 and gives you access to every HTML element in your document:

 // Is the all collection supported
 // supportAll assigned true if supported
 // else assigned false
 var supportAll = (document.all != null)

Now when you write you can check if the browser supports the all collection rather than hard code different version numbers. If Netscape Navigator supports the all collection in their next release, your code will automatically recognize it and work. If you hard coded the browser versions into your code, you would need to revisit and modify every page.

 if (supportAll)  {
  // all is supported, run code
 } else
 { 
  // do something else
 }

Which technique do I use?

For checking for support of a particular feature, capabilities detection is the way to go. However, some methods or objects may be supported by both browsers, but have slightly different semantics. When you need to distinguish between how one browser or another works with a particular feature, you need to use browser detection. In some cases you may choose to use both object and browser detection. For example, you may first check if the browser supports a particular command, and then based on the browser use the command in slightly different ways.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.