Cross-Browser Style Objects by Bill Pena, coauthor of Designing with JavaScript, 2nd Edition 01/25/2002

In Chapter 6 ("Too Many Browsers? Not Really") of Designing with JavaScript, 2nd Edition, we explore various techniques for dealing with browser incompatibilities by using browser detection. We can serve different CSS stylesheets to each browser, contain incompatible DHTML in a single frame, or just check if an object is supported.

In this article, adapted from Chapter 11 ("Advanced Applications") of the book, I extend the capabilities of older browsers instead, by recreating crucial W3C DOM features like the style object and the document.getElementById() method, and making them available to 4.0 browsers with proprietary DOMs.

Yes, it seems like you'd need a magical incantation to make all dynamic styles compatible across all browsers, but it is possible. Like all magic, this piece of JavaScript trickery relies on misdirection. By reconstructing DOM features out of each browser's proprietary DHTML extensions, and tying them to common names, this example creates another naming convention different from either the 4.0 browsers' or the W3C's, which you can then use to write browser-independent code.

This example applies the excellent work done by Bob Clary for Netscape, called xbStyle. You can find the latest version of xbStyle, as well as more information on cross-browser scripting, at DevEdge.

Application Programming Interfaces

xbStyle falls into a curious category of scripts called APIs (Application Programming Interface). An API doesn't give a piece of software many new capabilities, as do most scripts, but rather creates an interface through which you can make better use of the software in your own scripts. You could say that the DOM is an API for scripting HTML.

For example, the DOM doesn't invent new HTML elements, but it does let you manipulate those elements that already exist in ways JavaScript can't. xbStyle is an API for Internet Explorer 4, Netscape 4, and W3C style manipulation, giving you access to dynamic CSS styles across all three browsers through one convenient interface. This means that, rather than branching your code to work around incompatibilities, or creating three versions of your scripts altogether, you can write one script using xbStyle that will work the same across all browsers.

In this example, we'll be taking the sliding menus script from Chapter 10 ("Interactive DHTML Techniques") of Designing with JavaScript, and rewriting it to use xbStyle. The original script uses the W3C DOM to slide a layer across the screen, then snaps it back into place when finished. This version follows the same logic as the original, but changes the names to fit xbStyle's conventions.

In order to use xbStyle, you must first link the xbstyle.js file to your document:

<script language="javascript" src="xbstyle.js"></script>

xbStyle also makes use of the Ultimate Browser Sniffer, another JavaScript library from Bob Clary. You'll have to link that file to your document as well:

<script language="javascript" src="ua.js"></script>

Once you've linked your document to the Ultimate Browser Sniffer, you can start writing your script using the API.

Using XBStyle

First, here is the original sliding menu script, outside of its HTML context:

if (parseInt(layer.style.left) <= 0) {
    n = parseInt(layer.style.left);
    layer.style.left = (n + 5) + "px";
    }
else {
    clearTimeout(timeout); 
    }
}

function hideLayer() { 
    var layer = document.getElementById("Layer1");
    layer.style.left = "-75" + "px";
}

This script uses common features of the DOM, including document.getElementById() and the style object. Unfortunately, the way elements are found and how their style properties are accessed vary in the 4.0 browsers. For example, finding an element by its ID, a fundamental DOM function, can be tricky to implement correctly in both Netscape 4 and IE4.