Browser detect

AOL browsers cannot be reliably detected by JavaScript, because the Explorer 3, 4 or 5 that is underneath it does all the JavaScript and may announce itself as Explorer 3, 4 or 5.
If you must detect AOL browsers with 100% certainty, use a server side detect script.

For the moment I detect all Mozilla derivatives as Netscape 5.

Rather to my surprise the Reinvigorate Community Stats program turns out to use my script. View it here. Apparently it's good enough for industrial strength browser detection.

A useful but often overrated JavaScript function is the browser detect. Sometimes you'll need to give specific instructions or load a new page in case the viewer uses, for instance, Netscape 3.

If you're new to JavaScript, don't use this script. Please read the object detection page first.

Example

Let's detect your browser:

For starters I'll describe the variables you need, and afterwards I lenghtily describe the browser string and its complicated history. Then comes script itself, followed by its explanation. Finally I give some good reasons not to use a browser detect at all. Please read this last part carefully if you're new to JavaScript.

The variables

Below you see the objects contained by the object navigator. These variables can be read out and give information about the browser and computer of your users. Of course various browsers use different names for these methods and properties, except a few old ones.

The browser string

Of these variables, navigator.userAgent is the most important since it is supported by all browsers and gives the most complete information.


navigator.userAgent is the same as

This string may contain correct information about the browser, the version and the operating system.

and its problems

However, no sacred law requires the browsers to give correct information. More and more minor browsers offer their users the possibility to switch identification strings.

The reason they do so is that so many web developers use browser detects to make sure that, for instance, their pages are only accessible in Explorer. To get around this bad coding, the minor browsers need to change their identification string so that they, too, are admitted to the page.

In Opera the string always contains Opera. However, other browsers (notably Safari and iCab) hide their identity completely, they give no clue at all that they aren’t in fact Netscape or Explorer.

There is nothing you can do about it, except for using object detection instead. Since object detection is far superior to browser detection anyway, I advise you never to use a browser detect unless there’s no other way to get the information you want.

navigator.appName

Never use navigator.appName. To hide their true identity, many browsers give this property the values Netscape or MSIE. Any browser detect based on navigator.appName is totally wrong.

Unraveling the browser string

Reading browser strings is not easy. You have to know about the many pitfalls browser vendors have, knowingly or unknowingly, prepared.

The browser

First we need to know how this string is built. The string nearly always starts with Mozilla. This is the name of the old Netscape code engine, the one that formed the core of Netscape 1 to 4.

When Netscape 1 was the latest and greatest browser, it used Mozilla as its name and identification. Since back then it was the only browser supporting cookies and other exciting novelties like <CENTER>, many web developers wrote browser detects searching for Mozilla in the browser string to send Netscape 1 users to advanced pages and users of other browsers (Mosaic, Lynx) to simpler pages.

When Explorer and the later browsers hit the market, they supported cookies and other advanced Netscape 1 code, too. Therefore they also started their identification string by Mozilla to end up on the right side of these browser detects. This has remained a habit until today, even though it's not necessary any more.

Once again, we see that the use of browser detects forces browsers to identify themselves differently (wrongly, if you like).

The other browser vendors generally put the real name of their browser in their string, MSIE or Opera or whatever. They also added compatible directly after the Mozilla version number, to indicate that they weren't really Mozilla but only Mozilla-compatible. This, also, has become a habit.

On the other hand, until Mozilla Netscape has never added Netscape to this string. Therefore there is no certain way to detect a Netscape 4 or lower. If it's no other browser and if there's no compatible in the string, we have to assume it's a Netscape 1 to 4.

So to detect a browser, we search for the correct strings (or their absence).

The version

After Mozilla comes a slash and then the version number. In Netscape before version 6 this version number is the same as the version of the actual browser, but other vendors (notably Microsoft) weren't constrained by this. Instead, they chose the Mozilla version number they felt they were compatible with. This feeling could be very vague, of course.

All browser vendors except for Netscape have made it a habit to include the real version number behind the real name of their browser, separated by either a space or a slash. So once we have identified the browser name, we look for the second character after that. This is the browser version.

For Netscape, we take the number that's behind the Mozilla/ instead. This is correct for all Netscapes up to version 6. Unfortunately Mozilla follows neither rule. Its Mozilla number is 5 (correctly, because the '6' is only a marketing trick), but the browser name is of the form Netscape6/6.0, not following the rule I stated above. I decided not to do anything about it, Mozilla is detected as 'Netscape 5'.

Operating system

OS detection is relatively straightforward, as long as you know the ins and outs. Explorer says Windows, while Netscape says Win, so always detect Windows by searching for Win. Not surprisingly, if the string Mac is available the OS is Macintosh. If you find X11 this means the computer runs X-Windows for Unix, if in addition the string Linux is found the OS is Linux.

The script

You detect which browser is used by the following script:

var detect = navigator.userAgent.toLowerCase();
var OS,browser,version,total,thestring;

if (checkIt('konqueror'))
{
	browser = "Konqueror";
	OS = "Linux";
}
else if (checkIt('safari')) browser = "Safari"
else if (checkIt('omniweb')) browser = "OmniWeb"
else if (checkIt('opera')) browser = "Opera"
else if (checkIt('webtv')) browser = "WebTV";
else if (checkIt('icab')) browser = "iCab"
else if (checkIt('msie')) browser = "Internet Explorer"
else if (!checkIt('compatible'))
{
	browser = "Netscape Navigator"
	version = detect.charAt(8);
}
else browser = "An unknown browser";

if (!version) version = detect.charAt(place + thestring.length);

if (!OS)
{
	if (checkIt('linux')) OS = "Linux";
	else if (checkIt('x11')) OS = "Unix";
	else if (checkIt('mac')) OS = "Mac"
	else if (checkIt('win')) OS = "Windows"
	else OS = "an unknown operating system";
}

function checkIt(string)
{
	place = detect.indexOf(string) + 1;
	thestring = string;
	return place;
}

Explanation

We start by taking navigator.userAgent and making the whole string lower case (so that it also works if some browser vendor does weird things with caps).

var detect = navigator.userAgent.toLowerCase();

I use one help function, checkIt(). This is the function that does the actual detect for a string. It returns the index number of the browser name in the string. If the name isn't in the string, it thus returns zero.

It also remembers place (the place of the browser name in the string) and thestring itself. The function is only executed until we have found the correct browser. After that the function isn't called any more so place and thestring keep the value they had when detecting the correct browser. See below for the details.

function checkIt(string)
{
	place = detect.indexOf(string) + 1;
	thestring = string;
	return place;
}

Browser detect

The trick of this script is to start with the rare browsers and end with the common ones. As we’ve seen Opera can assume the identity of Explorer, but it always leaves Opera somewhere in the string. Therefore we first check if the browser is Opera, and only if it isn’t we search on to see if it is Explorer. This detection order is very important.

So we start with exotic browsers. Konqueror first.

if (checkIt('konqueror'))
{

The bit after the if is only executed when the name Konqueror appears in the browser string. If it does, the browser is Konqueror and the OS is Linux, even though the browser string may contain no reference to this OS.

	browser = "Konqueror";
	OS = "Linux";
}

Now comes a long lists of else if's. Again we start with the minor browsers.

else if (checkIt('safari')) browser = "Safari"
else if (checkIt('omniweb')) browser = "OmniWeb"
else if (checkIt('opera')) browser = "Opera"
else if (checkIt('webtv')) browser = "WebTV";
else if (checkIt('icab')) browser = "iCab"

If the browser is none of the above, we can safely check if it’s Explorer.

else if (checkIt('msie')) browser = "Internet Explorer"

Now for Netscape. We check if the string 'compatible' is NOT present. If it isn't present, the browser is probably Netscape. Also, the version number is always on the ninth place in the browser string (index 8, behind Mozilla/), so we detect this version number immediately.

else if (!checkIt('compatible'))
{
	browser = "Netscape Navigator"
	version = detect.charAt(8);
}

If this still isn't the browser, I don't know.

else browser = "An unknown browser";

Of course you can easily add other browsers to the else if list. Just remember to check for minor browsers first.

Version detect

Now for the version. If there's no version yet detected (if the browser is not Netscape)

if (!version)

we take the character behind the browser name, using place and thestring that the function checkIt() has prepared for us.

version = detect.charAt(place + thestring.length);

OS detect

If an OS is not yet detected

if (!OS)
{

we start a new list of else if's:

	if (checkIt('linux')) OS = "Linux";
	else if (checkIt('x11')) OS = "Unix";
	else if (checkIt('mac')) OS = "Mac"
	else if (checkIt('win')) OS = "Windows"
	else OS = "an unknown operating system";
}

that gives us the operating system.

Using it

Now you have enough information to make decisions based on the user's browser. For instance:

if (browser != "Internet Explorer")
{
	code not executed in Explorer
}

or

if (version < 4 || browser == "iCab")
{
	code executed in browser versions 3 and below and iCab
}

Not using a browser detect

Now that you know how to detect browsers, you must still learn when to detect browsers and when to use other methods of detection. Many novices overrate the importance of a browser detect.

The most common reason for detecting browsers is to prevent certain bits of script that are not supported in certain browsers from being executed in those browsers. However, using a browser detect for object detection is not very safe since you can never be sure that your browser detect covers all circumstances.

The safest way of handling support issues is object detection: seeing if the browser supports the JavaScript method or object you want to use and not bother about detecting the browser. Use the script on this page only when object detection is impossible.