Platinum Edition Using HTML 4, XML, and Java 1.2
(Publisher: Macmillan Computer Publishing)
Author(s): Eric Ladd
ISBN: 078971759x
Publication Date: 11/01/98

Another freely available library of Cross-Browser Dynamic HTML JavaScript functions was developed by Mike Hall and is included on the CD-ROM that accompanies this book, in the file cbdhtml.js. It is the functions in this library, and some sample applications that show their use, on which we will be spending the most time in this chapter.

---

NOTE:  Mike Hall’s Web site, located at http://members.aol.com/MHall75819/index.html, is a good example of what you can achieve using Dynamic HTML that is targeted for both Netscape Navigator and Microsoft Internet Explorer.

---

Browser Detection Scripts

Before we turn our attention to Cross-Browser Dynamic HTML (which, for the sake of brevity, we will abbreviate CBDHTML), one more topic should be discussed. The key to developing HTML documents that implement CBDHTML functions correctly on multiple browsers and platforms and that degrade gracefully on older or third-party browsers is the capability to successfully detect the Web browser being used. Again, many solutions are freely available that solve this problem; one of the most extensive is Netscape’s Ultimate JavaScript Client Sniffer, which you can download from http://developer.netscape.com/docs/examples/javascript/browser_type.html.

When included within an HTML document and evaluated on the client Web browser, the Client Sniffer creates an is object with a series of properties that can be used in your scripts to detect the browser type and platform being used to view your document. Figure 27.1 shows Netscape Navigator version 4.05, running on Windows 95, viewing the Web site at the URL given in the previous paragraph.

•  Basic Browser Information—These are not part of the created is object but are properties of the navigator object, which is part of the existing Document Object Model. Each returns descriptive numeric of string values navigator.appName, navigator.userAgent, and navigator.appVersion.

•  Version Number—These are numeric values describing the major and minor version numbers of the client.

•  Browser Version—These are perhaps the most important properties of the is object that describe the client browser, each of which is a Boolean value used to describe what type of browser is being used. The Boolean properties that are set are nav, nav2, nav3, nav4, nav4up, and navonly to detect Netscape Navigator client browsers; ie, ie3, ie4, ie4up, and isIE3Mac to detect Microsoft Internet Explorer client browsers; and opera to detect the Opera browser.

•  JavaScript Version—The js property returns a numeric value indicating the JavaScript version supported by the browser.

•  Operating System—Finally, a series of Boolean values are set to indicate the platform upon which the client browser is running. The possibilities are win, win16, win31, win32, win95, win98, winnt, os2, mac, mac68k, macppc, unix, sun, sun4, sun5, suni86, irix, irix5, irix6, hpux, hpux9, hpux10, aix, aix1, aix2, aix3, aix4, linux, sco, unixware, mpras, reliant, dec, sinix, bsd, freebsd, and vms. Note that the win31 property is true when the client is running under Windows 3.1 or Windows for Workgroups, and the win32 property is true when the client is running under a 32-bit version of Windows (Windows 95, Windows 98, or Windows NT).

FIGURE 27.1  Using JavaScript, you can detect a wealth of information about the client Web browser used to view your documents.

The way the Ultimate JavaScript Client Sniffer would be used in an HTML document is to include, and then to use, the properties of the is object to conditionally write HTML code depending on the detected browser type and platform. The following JavaScript code snippet shows an example:

var is = new Is();
if (is.nav4up)
JavaScript document.write statements to write Navigator 4+ code…
if (is.ie4up)
JavaScript document.write statements to write Internet Explorer 4+ code…

Formatting with Style Sheets

The W3C’s CSS1 style sheet specification was one of the first technologies considered a part of Dynamic HTML that was agreed to by both Netscape and Microsoft. Even so, none of their browsers’ various versions or platforms fully implement the specification, nor do they implement everything in the same way. Also, although both implementations of Dynamic HTML expose the style sheet properties to scripting, the Document Object Model that does this is different for each.

So, the first step to take before using style sheet properties in a Web page meant to be cross-browser compatible is to make sure you use those properties that are consistently implemented in each. Fortunately, this task is made easier by some online resources. At http://style.webreview.com/ you can find a compilation of style sheet properties that are considered safe for cross-browser deployment. Figure 27.2 shows part of the grid of safe properties, showing browser and platform and whether the property is completely (indicated by Y) or partially (indicated by P) safe.

FIGURE 27.2  You should confine your Web pages to use those style sheet properties that are widely supported.

With either Web browser, it is possible to specify style sheet properties one of two ways. The first of these, which is using CSS1 style sheet syntax, is the same on both browsers. To specify a style sheet class that gives an element a yellow background color, for example, you could use the following on either browser:

<STYLE TYPE=“text/css”>
.bgyellow {background-color: yellow}
</STYLE>

If you want to conditionally set style sheet properties depending on some condition, you can’t use CSS1 syntax because style sheet properties specified through CSS1 syntax are static. To set these properties dynamically, you need to use JavaScript and the Document Object Model for the appropriate browser.