Html

DEALING WITH BROWSER DIFFERENCES

The W3C has revolutionized DHTML by making a single standard that both Netscape and Microsoft have committed to support. Nevertheless, neither supports it perfectly yet, and many users use old browsers. If your page relies on DHTML, you will need to account for all of these possibilities.

DHTML BROWSER DIFFERENCES

Back when the version 4.0 browsers were the latest thing, there were major differences between their supports for DHTML. If you wrote an application using DHTML for Internet Explorer 4.0, there were no chance at all it would work on Netscape 4.0.

Things are different now with the W3C DOM. Since both Internet Explorer 5 and later, and Netscape 6 and later are based on this standard, if you write an application for one of these browsers the chances are good it will work on the other.

However, neither browser supports 100% of the W3C DOM standard. As you use more specific properties and attributes, the chance increases that you'll run into a difference between the browsers.

There are two key things you can do to make sure the latest DHTML browsers support your scripts: First, test script in as many different browsers as possible. At the very least, you should have the latest version of Netscape and Internet Explorer available.

Second, you can use JavaScript to detect the user's current browser or the features it supports; you deal with difference by writing code for different browsers. Using this technique, you can support older browsers, as well as the latest.

DETECTING BROWSERS

If you plan to support more than one browser - or even if you're restricting your page to certain browsers - you'll need a way to detect which browser is in use. You can do this in one of two ways:

Detecting the exact browser in use (browser sensing)

Detecting whether a feature is supported (feature sensing)

BROWSER SENSING

The most obvious way to detect which browser is in use is to use the navigator object, which is supposed to contain a concise list of information about the user's browser. Listing 17.1 shows a simple script that displays the values of several navigator properties.

Listing 17.1 Displaying Information About the Browser

Browser Information

Browser Information

The navigator object contains the following information

About the browser you are using.

document.write("Code Name: " + navigator.appCodeName);

document.write("App Name: " + navigator.appName);

document.write("App Version: " + navigator.appVersion);

document.write("User Agent: " + navigator.userAgent);

document.write("Language: " + navigator.browserLanguage);

document.write("Platform: " + navigator.platform);

FEATURE SENSING

Supposed you've used browser sensing to check the Internet Explorer 5 or Netscape 6. Now supposed that Netscape has released version 7, Internet Explorer has released version 7.5 and Opera has released a version that supports DHTML better than either one. Chances are, one or more of these new browsers wouldn't work with your script.

To account for situation like this, you can see feature sensing rather than browser sensing. By detecting the specific DHTML features you plan to use, you can determine whether the current browser supports them - without necessarily knowing which browser it is.

You've already seen an example of browser sensing in several of the example in this book:

if (!document.getElementById) return;

This statement checks whether the document.getElementById method exists. If it doesn't exist, it returns from a function. You can also use this technique to create a version of the script for older browsers, as you'll see later in this hour.

If you include a statement like this before you actually use the document.getElementById method, you can avoid error messages in older browsers. You can use the same technique with document.getElementsMyTagName, or any other method or object your script will use.

USING FEATURE SENSING

Using feature sensing, you can create simple script that checks whether the current browser support the W3C DOM or one of the older DHTML standards. Listing 17.2 shows the feature sensing example.

Listing 17.2 Using Feature Sensing

Browser Feature Sensing

Browser Feature

The information below was obtained using feature sensing:

if (document.getElementById) {

document.write("This browser supports getElementById");

document.write(", and appears to support the W3C Dom.");

} else document.write("The W3C DOM is not supported.");

if (document.layers) {

document.write(("This browser supports the layer arrays");

document.write(", and is most likely Netscape 4.");

} else document.write("The layers array is not supported.");

if (document.all) {

document.write("This browser supports the document.all array");

document.write(", and is most likely Internet Explorer.");

} else document.write("document.all is not supported.");