Vol. 1, No. 37
Using JavaScript for Browser Detection

The thing about the Web is that you never know who's looking at your site. Mostly it doesn't matter, but occasionally it does. Because different browsers display the same page in different ways (or sometimes don't display it at all), it can matter a great deal what browser your site's visitors are using. If you include fancy features geared toward newer browsers, visitors with older browsers may see an error message or just a sloppy-looking broken version of that feature unless you explicitly turn it off in their case. But how do you know who's running what? Browser detection.

Whenever a user visits your site, the user's browser sends a tidbit of header information about itself to your Web server. The part of this we are interested in at the moment is the User Agent string. This is a string of self-identification programmed into each browser. So Internet Explorer 4, running on Windows 98, sends a string that looks like this:

User Agent: Mozilla/4.0 (compatible; MSIE 4.01; Windows 98)

(Why Internet Explorer says it's Mozilla [i.e., Netscape] is a good question. Basically Microsoft didn't want to be excluded from sites that catered only to Netscape, so it started telling those sites that it WAS Netscape. But we know better.)

Meanwhile, Netscape 4 running on Windows NT identifies itself as:

User Agent: Mozilla/4.04 [en] (WinNT; I; Nav)

All very straightforward and friendly. The problem (you knew there had to be a problem, right?) is that these strings contain a lot of information, presented in a not-quite-standard format. So there's a little bit of a gap between reading the string and figuring out what it means. Fortunately, the gap can be spanned with a little clever coding.

First let's look at the JavaScript we need to get our hands on the User Agent string. This is easy as pi: it's provided in the appVersion property. So a line of code like:

var useragent = navigator.appVersion

will put the string in the variable "useragent".

Now what do we do with it? Good question. Once we've got it in a JavaScript variable, we can pull out the information we want selectively, using our understanding of JavaScript string manipulation. To find out just the major version number of the user's browser, we can use parseInt, which strips everything that's not an integer:

var majorversion = parseInt(useragent)

That will set the variable "majorversion" equal to 3 for third-generation browsers, 4 for fourth-generation browsers, 5 for fifth-generation browsers...you get the picture.

Moving right along: next let's pull out the vendor info--is it Netscape or Explorer or Opera or Lynx or Konqueror or, etc.? Here we will use our invaluable friend indexOf, which, as you no doubt recall, scans a string to see if a certain other string is contained therein, and returns a count of how many times it finds that substring. We can use this as follows: look at the User Agent string to see if it contains, say, "MSIE". If it contains it zero times, it ain't Internet Explorer. More than zero times (namely, one time), it is! Rinse, repeat for each browser you want to detect:

var iecheck = useragent.indexOf("MSIE") var nscheck = useragent.indexOf("Nav")

(And as many more as there are browsers whose users you care about catering to.) For each browser, one of these variables should be equal to one, and the others equal to zero. Voila. Now you know the browser and the version. indexOf can be used to search for platform information (Win95, PPC, and so forth) or any other information you want. So, if you so crave, you can have your site turn away everyone except those running Mosaic on HPUX, or whatever else your tiny little heart's twisted agenda may call for.

If you don't want to mess around with all that gnarly programming and testing and stuff, you can use the delightful browser-detection code that the philanthropic webmonkeys at Webmonkey give away for free. You can score it here.

Another alternative is object detection. This technique involves checking to see, not which specific browser the users are running, but rather whether they're running any browser that supports the particular feature you want to use. This approach has a number of advantages, notably that you don't have to extensively research which browsers support what, and update your code every time a new version of Netscape comes out. It's only useful for JavaScript capabilities, though: if you want to see how the user will handle your HTML, you need to know what browser they're running. Or if it's a JavaScript feature that's supported by different browsers in different ways, again, you'll want to know what the specific browser is, because they'll both say, "yes, I support that," but you won't know the details of how.

Detecting capabilities is as simple as an if statement. To test for the presence of the images object, for example:

if (document.mimeTypes) { // code that relies on MIME types }

This little conditional will only run your MIME manipulation code if the browser supports the mimeTypes object. The same technique can be used to detect any JavaScript object: images, css, what have you.

So that's it. Now your users need never again miss out on a feature or see another error message. Have fun.

HINTS, POINTERS, AND TIPS 'O THE TRADE:

All of this is JavaScript-based, which means, among other things, that it won't work on browsers (such as Lynx) that aren't running JavaScript. You can do the same browser detection, faster, less detectably, and for everybody, with CGI.

If you're building a site that will work differently for different browsers, it's a very good idea to familiarize yourself with the capabilities of each version of the most popular browsers. Webmonkey has a good chart about that (see link below).

In general, as you live your life, if you don't know what to do, try just doing something. Even if it's not the right thing, it might give you the insight or the momentum you need.

RESOURCES: Webmonkey's guide to browser detection.

Webmonkey's chart of browser features.

Webmonkey's browser-detection JavaScript.

Handcrafted Archive