Hack 47. Update Browser Detection Scripts

Work out whether your web page is loaded into Firefox.

There are all kinds of Mozilla browsers and even different variants of Firefox [Hack #92], although the standard distribution of Firefox is by far the most popular distribution. This hack explains how to detect Firefox. Your web page can also make a display contract with Firefox [Hack #46] .

5.5.1. Detect Firefox by UserAgent

Either behind the web server or in the web page, the foremost identifier of Firefox is the browser user agent (UA) string. The UA string is defined in RFC 1945 and RFC 2068. It is sent over the wire from web browser to web server in this header line:

User-Agent: string

It appears in the Apache server environment as this environment variable:

HTTP_USER_AGENT=string

It appears in JavaScript as this host object property:

window.navigator.userAgent

For quick sanity checks, the user agent for Firefox can also be displayed using the HelpAbout Mozilla Firefox menu item. That page can be displayed separately using this URL:

chrome://browser/content/aboutDialog.xul

Select the text of the user-agent string with the mouse and drag up or down if it looks odd when it first appears.

To detect Firefox, chop up the UA string. Useful JavaScript functions include these:

userAgent.substring(start, length); // returns a fixed substring
userAgent.split(" ");               // returns array of whitespace-separated pieces
userAgent.match(/.*fox/i);          // returns case-insensitive regexp match

Here are the meaningful substrings of the user agent:

Mozilla: The user agent is probably a web browser.
Gecko: The user agent contains Mozilla Gecko display technology, a big part of Firefox. Gecko guarantees that web pages will look the same across all Mozilla browsers and that quality web standards support is present. Browsers such as Galeon and Camino also fall into this category; however, they don't support Firefox extensions.
Firefox: The user agent is a Firefox browser, with full extension support and other niceties that are implied by Firefox.
Firebird, Phoenix: The user agent is a very old version of Firefox. It is best to treat it as a non-Firefox browser, because the version is too early to support some modern Firefox features.
en-US (or other strings in the same spot): The menus, status bar messages, and other browser text appear to the user in U.S. English. Don't write alerts or other messages in the wrong language.

5.5.2. Detect Firefox via the DOM

The user agent string is exposed to the Document Object Model (DOM) of a given web page as described earlier in this hack. Other detection methods also exist in the DOM.

5.5.2.1 document.all

Testing this DOM property like this is a common way of detecting Internet Explorer (IE):

if (document.all ) { ... }

Some web pages are built in ignorance of the constraints of the global Web. Such pages use document.all without first checking to see if it exists. These cases, such as the following example, cause pages displayed in non-IE web browsers to fail:

if ( document.all("id") == null ) { ... }

Firefox has special support for document.all, as follows:

If the all property is stated in a Boolean (true/false) context, as in the first example, then Firefox (and all recent Mozilla-based browsers) will report that the method doesn't exist. This is the same as matters have always been.
If the all property is invoked as a method, as in the second example, then Firefox (and all recent Mozilla-based browsers) will behave the same way as IE. This preserves the display of some old, ignorant web pages.

This support only exists when a web page is displayed in Quirks mode. Quirks mode is for old, legacy HTML documents. One easy way to ensure that Quirks mode is operating is to leave out an HTML document's <!DOCTYPE> declaration. You can see if a page uses Quirks mode or not using ToolsPage InfoGeneral. Look at the Render Mode line item for the current mode.

5.5.2.2 document.implementation.hasFeature(type,version)

This method is defined in the W3C's DOM 2 Core standard. It allows a script to test for UA support for specific standards. For example, this test can be used to test for CSS2 support:

document.implementation.hasFeature("CSS2","2.0");

In particular, this method can be used to test whether the Firefox UA is built so that it includes SVG:

document.implementation.hasFeature("org.w3c.svg","dummy string");

It can also be used to report whether specific SVG features (a term specific to SVG) are implemented. To do so, provide an SVG 1.1 feature URL as the first argument, like this:

"http://www.w3.org/TR/SVG11/feature#Structure"

5.5.2.3 document.layers

This DOM 0 collection, present in Netscape 4.x, is not present in Firefox at all. It's unusable as a positive test of Firefox, so it no longer stands for "Netscape 4.x or higher." Now it stands for "Netscape 4.x only."

5.5.3. Detect JavaScript Version Support

All Firefox browsers support at least JavaScript Version 1.5. That version fully supports ECMAScript Version 1, Edition 3. Firefox also supports earlier versions of JavaScript, but you should never use them. Include external scripts within HTML and XHTML with this tag:

<script type="text/javascript" src="..."></script>

Similarly, include embedded scripts with this tag:

<script type="text/javascript">
... content ...
</script>

Support all scripts used strictly in XUL with this tag:

<script type="application/x-javascript" src="..." />

See also [Hack #74] for some fancy new features.