Detecting Browser Capabilities Via Script
= Index DOT Html by Brian Wilson =

Main Index | Element Index | Element Tree | HTML Support History
The Issue | Navigator Properties | Other Navigator Properties
User Agent Strings | Browser Detection

The Issue
The capabilities of Javascript and the browsers that use it have advanced rapidly since their creation. Because these are moving targets, it is sometimes essential to know exactly what your browser is and what it supports.

Luckily, Javascript provides several ways to detect characteristics of the browser invoking it.
  1. Javascript engine version string (<script> "LANGUAGE" attribute)
  2. Scripting object detection
  3. UA string & other browser properties (Navigator object properties/methods)
<Script Language="value">
The LANGUAGE attribute for the SCRIPT element allows a specific version of a scripting engine to be targeted. In addition to the scripting language keyword (eg: Javascript, JScript, VBScript), the version number of the scripting engine may be appended (eg: 'Javascript 1.3', 'JScript 2.0') ONLY script engines of that version and above should read the contained script. Script engines below the specified version should ignore it.
JavaScript      JScript/VBScript
Version   Shipping
Version   Shipping
1.0Nav 2.0x 1.0IE 3.0x
1.1Nav 3.0x 2.0IIS 3.0
1.2Nav 4.0-4.05 3.0IE 4.0x/IIS 4.0
1.3Nav >= 4.06 5.0IE 5.0
1.5Nav >= 6.0 5.6IE 6.0
ECMAScript Compliant:
JavaScript 1.3 & above; JScript 3.0 & above
Scripting Object "Sniffing"
Javascript exposes methods and properties for components of a document called "objects." Different browsers have added support for different objects. You can search for relevant substrings in the UserAgent string, or you can also "sniff" for the existence of the objects you need before you try to access them. Object "sniffing" tends to be easier and more useful in practice for detecting browser capabilities than UserAgent "sniffing", but does not reveal as much specific information about the browser itself. Be sure to not make any assumptions of the browser in use based only upon the existence of some supposedly "unique" object that that browser supports.
Useful objects to detect:
document.images [IE4|N3|O3]
document.layers: [N4-4.x]
document.all: [IE4|O6]
document.getElementById: [IE5|N6|O5]
    if (document.all)
       { alert ("This is browser-specific code"); }
Navigator Object
This is a basic Javascript object containing several properties (see below) describing the characteristics of the browser. The most useful of these is the "userAgent" property. The "userAgent" property typically contains such information as the browser type and version, the operating system and the language - all lumped together into a single string. The trouble with this method is, there is no common format that browsers use to identify themselves in the userAgent string, and some browsers even let the user change the UserAgent string to whatever they wish. But, if you know what to look for, some skillful manipulation of the Javascript String.substring(from, to) and String.indexOf(substring) methods can extract some useful information from the string.
Values: [See below]
Common Navigator Object Properties
The "code" name for the browser.
Values: "Mozilla" for IE, Netscape and Opera.
Your Browser Reports: 
The name of the current browser.
Values: "Netscape" for Netscape and Opera, "Microsoft Internet Explorer" for IE.
Your Browser Reports: 
The version of the browser.
Internet Explorer: [Netscape Compatible Version] (compatible; MSIE [version]; [Operating_System])
Netscape: [version] ([Operating_System]; I)
Opera: [version] ([Operating system]; I)
Internet Explorer 3.0 example: 2.0 (compatible; MSIE 3.02; Windows 95)
Netscape 3.0 example: 3.0 (Win95; I)
Opera 3.6 example: 3.0 (Win95; I)
Your Browser Reports: 
A combination of the appCodeName and appVersion properties for the browser.
IE/Netscape: [appCodeName]/[appVersion]
Opera: [appCodeName]/[Netscape Compatible Version] (compatible; Opera/[Generic version family]; [Operating system]) [Specific version]
Your Browser Reports: 

Some Other Useful Navigator Properties

Example User Agent Strings
Browser Detection Scripts
You may notice that the number of distinct UA strings is limitless and does not always follow a concrete pattern. How then can you detect what browser a reader is using? You can create your own detection routine using Javascript's string manipulation functions, given what you now know about UA strings. If you want to avoid re-inventing the wheel, there are several public routines on the Internet and in books that will do this as well. These routines are often more exhaustive and bulky than what you will need for a given task. You will have to decide if the exhaustive approach suits your needs. For an example of an exhaustive browser detection script, try Netscape's "Ultimate JavaScript Client Sniffer."
Dan's Web Tips: "Brand-X" Browsers: Beyond the Big Two
Internet Authoring Hints'n'Tips: Browser Detection [Linking to Internet Archive's last known good snapshot due to Link Rot.]
Statmarket: An interesting sample of browser statistics

Boring Copyright Stuff...