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

CHAPTER 27
Cross-Browser Dynamic HTML

by Jim O'Donnell

In this chapter

What Is Cross-Browser Dynamic HTML? 670

Cross-Browser Dynamic HTML Libraries 672

Browser Detection Scripts 672

Formatting with Style Sheets 674

Style Sheet Positioning 679

Dynamic Fonts 682

Resources on the Web 684

What Is Cross-Browser Dynamic HTML?

In the last three chapters, you read about the technology offerings that Netscape and Microsoft have included in the latest versions of their Web browsers—in version 4 and higher of Netscape Navigator and Microsoft Internet Explorer—that come under the heading of Dynamic HTML. Unfortunately, but not surprisingly, their two implementations of Dynamic HTML are largely incompatible. Even where the two browsers (and each of the platform versions of each browser) support similar capabilities, these capabilities are usually implemented in different ways. Navigating your way through the confusing thicket of Cascading Style Sheets, Document Object Models, Dynamic Fonts, and other standards and not-so-standards used in the two flavors of Dynamic HTML is a forbidding task.

The Goals of Cross-Browser Dynamic HTML

Fortunately, there is another way. Since version 4 of Navigator and Internet Explorer were first introduced, any number of developers and development companies have been addressing the issue of writing Dynamic HTML code that is compatible on as many browsers as possible. The goals of this “Cross-Browser Dynamic HTML” are as follows:

•  Support the subset of Dynamic HTML functionality that exists in both Netscape Navigator and Microsoft Internet Explorer.

•  Where functionality is used that exists in one browser but not in the other, in previous versions of either browser, or in third-party browsers, ensure that no errors are generated in the incompatible browsers.

•  Where functionality is used that exists in one browser but not in the other, in previous versions of either browser, or in third-party browsers, ensure that the performance and appearance of the Web page degrades gracefully on the incompatible browsers.

Cross-Browser Dynamic HTML Functionality

A number of areas exist where functionality is shared between Netscape and Microsoft’s implementations of Dynamic HTML. Remember that in some cases, as noted in Chapter 24, “Introduction to Dynamic HTML,” the two browsers share similar capabilities, but those capabilities are not considered part of “Dynamic HTML” in one of the browsers. An example of this is downloadable font capabilities; both browsers support it, but technically it is not a part of Microsoft’s Dynamic HTML.

The following areas are where functionality is shared. The ways that this functionality is implemented may be different; it is one of the goals of Cross-Browser Dynamic HTML to address these differences compatibly within one Web page:

•  Cascading Style Sheets—Both Netscape and Microsoft largely support the World Wide Web Consortium’s (W3C) CSS1 specification for including style information in an HTML document.

•  Cascading Style Sheet Positioning—The W3C’s CSSP specification is used to detail how content can be moved around within a Web page and how it is supported by both browsers.

•  Document Object Model—The Document Object Model (DOM)—the means by which the contents of an HTML document are exposed to manipulation by scripting languages, Java applets, and other means—is the heart of Dynamic HTML. Both Netscape and Microsoft extended their DOMs with Dynamic HTML to support most of its increased functionality. Although these extensions are largely incompatible, they include the seeds by which cross-browser techniques can be developed.

•  Web Browser Events—With version 4 of Navigator and Internet Explorer, more events are supported, including more mouse events, keyboard events, and a number of other things. Again, Netscape and Microsoft implemented these event models in a drastically different way. Despite this, it is possible to use the compatible cross-browser.

•  JavaScript—Netscape originally developed the JavaScript browser scripting language and continues to lead in its development. The language used in Microsoft Internet Explorer, JScript, is Microsoft’s implementation of JavaScript. It is largely compatible, although some of the capabilities included in the latest version of JavaScript are not supported.

•  Downloadable Font Technology—The font technologies used to support downloadable fonts for the two browsers are completely incompatible. Despite that, it is possible to create an HTML document that uses both to achieve the same effect in both browsers.

As you will see in the discussion that follows, two main techniques are used to develop HTML documents that successfully implement Cross-Browser Dynamic HTML. Where possible, methods should be used that are compatible between both browsers. Some of the CSS1 and CSSP style sheet formatting and positioning can be done this way.

However, the more common technique used to implement much of the Cross-Browser Dynamic HTML functionality is to dynamically generate HTML code conditionally based on which browser is being used to view the document. This is done by using a script to detect which browser is being used and then generating the contents of the HTML document on-the-fly using conditional document.write statements in JavaScript.

Cross-Browser Dynamic HTML Limitations

Obviously, you won’t be able to do many things compatibly on both browsers using Dynamic HTML. Capabilities in the Dynamic HTML of one browser are simply not present in the other. To implement such functionality in a cross-browser compatible fashion, it would be necessary to use Java or plug-in technology that is supported by both browsers.

The most important difference to keep in mind between the two browsers’ Dynamic HTML implementation is that Netscape Navigator can’t change content or format after load time unless the document is reloaded or regenerated. With Microsoft Internet Explorer, it is possible to change the font, color, size, or other appearance characteristics of anything on a Web page, and that page will be instantly re-rendered without going back to the Web server. It is even possible to dynamically change content in this manner. In Netscape Navigator, the way to achieve a similar effect is to render the content in different layers and then manipulate the visibility characteristics of each layer to display the desired format or content.

Cross-Browser Dynamic HTML Libraries

As mentioned in the previous section, a number of freely available JavaScript libraries can be used to implement Cross-Browser Dynamic HTML functions. The first of these is Netscape’s own Cross-Browser Dynamic HTML API, available through their “Cross-Browser DHTML Technote: API For Setting CSSP Properties From JavaScript” at http://developer.netscape.com/docs/technote/dynhtml/csspapi/csspapi.html. (API stands for Application Programming Interface.) Through this technote, you can download, view, and use the collection of JavaScript functions included in Netscape’s xbdhtml.js API for implementing Cross-Browser Dynamic HTML functionality.