Web Design in a Nutshell, 2nd Edition

Browser Detection

All of the DHTML examples we’ve looked at in this chapter depend on features of the DOM Level 1 and DOM Level 2 standards, which means that they only work in the latest web browsers, Netscape 6 and Internet Explorer 5.5. This means that if you use one of these examples, you must first check for the user’s browser type and version, so that you can make sure that the browser supports the script. Each of the example scripts should begin like this:

<script language="JavaScript"> 
var isNN4, isIE4, isDOM;

if (document.getElementById) {
    isDOM = true;
}
else {
    if ( parseInt(navigator.appVersion) == 4) {
        if ( navigator.appName == "Netscape" ) {
            isNN4 = true;
        }
        if ( navigator.appName == "Microsoft Internet Explorer" ) {
            isIE4 = true;
        }
    }
}
</script>

This code checks the identity and version of the browser and sets the appropriate variable to true: isDOM for a standards-compliant version of Navigator or IE, isNN4 for Netscape Navigator 4, or isIE4 for IE 4.

Once we have tested the user’s browser and set the appropriate variable, we can use that variable to run the right browser-specific code:

if (isDOM) {
    // Insert W3C DOM-based DHTML here
}
else if (isIE4) {
    // Insert IE 4 DHTML here
}
else if (isNN4) {
    // Insert Navigator 4 DHTML here
}

Layers in the 4.0 Browsers

The DHTML code that we’ve used to access and manipulate layers works only in the latest web browsers. If you need to support the 4.0 browsers, there are a few things you need to know about their proprietary versions ...