Cross-Browser DHTML: Simple Hybrid

Simple Hybrid

If we choose not to maintain two separate and distinct versions of our pages, we're necessarily looking at a hybrid. A hybrid is a page whose code contains contingencies for either browser. In this way, either browser can load the same page. This doesn't mean that all of the code within is executed by both browsers; rather, using one or more approaches we construct the code such that the relevant bits are executed by the appropriate browser.

Let's consider an example. Suppose your page contains a block of content, typically created by using <DIV> tags:

<DIV ID="title" STYLE="position:absolute; top:10px; left:100px; width:150px;">
<P STYLE="font-family:Arial; font-weight:bold; color:red;">
Welcome to my World
</P>
</DIV>

Now let's suppose that you want to change the background color of this content block. Knowing the differing DOM's for each browser, we know that the background color property for a content block is part of the layer object in Netscape but part of the style object in Microsoft. Furthermore, the background color property is named bgColor in Netscape yet backgroundColor in Microsoft. The simplest way to hybridize these differences into JavaScript code is to use the mini-fork:

<SCRIPT LANGUAGE="JavaScript1.2">
if (document.all)
{document.all["title"].style.backgroundColor="black"}
else {document.layers["title"].bgColor="black"}
</SCRIPT>

Conceptually, this mini-fork operated on the same principle as the top-level fork we saw earlier. The line if (document.all) is a browser test of sorts; actually, known as an object test. We know that Internet Explorer supports the all object, and so we test for it as our conditional. Testing for a particular object in this way, rather than testing for the explicit version of the browser, is considered a more elegant approach. Perhaps another browser will eventually support the all object -- if so, this code may then work in that browser, as well. If our conditional code had specifically ruled out any browser other than Internet Explorer we would lose this flexibility.

We can also assume that a browser that has reached this script does support one variety of DHTML, otherwise it would have been weeded out at an earlier stage. Thus, if the browser does not support the all object (the else clause in this example), it is likely Netscape (since that is the only other DHTML browser), and we can use Netscape syntax in our statement.

Ultimately, the script above will change the content block's background to black, using the appropriate syntax for the browser being used. This is a hybrid.

Although still a coarse solution, hybridizing your code to cover both browser scenarios will likely play an integral role in any cross-browser DHTML page. Nonetheless, such hybrid code is not yet the height of elegance. You are still essentially maintaining two independent versions of the page, but simply threading them together in one file with logic code to tease them apart. If you wanted to modify your page so that the background color was instead changed to green you would still have to update this data in two places -- the Microsoft-syntax statement and the Netscape-syntax statement, albeit within the same file.

Cross-Browser DHTML: A Spork in the Road
Cross-Browser DHTML
Cross-Browser DHTML: Syntax Patching