Older Netscapes (Gecko)

Older Netscapes -- versions 4 through 4.8 -- use the Gecko rendering engine. This engine recognizes <div> boxes, but can't do as much with them as newer browsers. The JavaScript reference used to access CSS properties is as follows:

document.div_ID.style_property = "new style property value";

It's a pity that all browsers didn't follow the simple example above. It's pretty self-explanatory. You just type "document" and follow that with the <div>'s ID. That's followed with the property you want changed and the new value. The beauty of simplicity. Unfortunately, it is only supported by older Netscapes.

Detecting An Older Netscape Browser

Older Netscapes can be easily detected by checking for a lack of support for either "document.all" or "document.getElementById". It doesn't support either.

if (!document.all)...

OR

if (!document.getElementById)...

The exclamation point (!) preceding the object name means "no" or "not". It means that the object is not supported by the browser.

More commonly, modern browsers are detected by their support of "document.getElementById" and the older Netscape code is used in an ELSE statement:

if (document.getElementById)
{Code for modern browsers}

else {Code for older Netscapes}

Let me say up front that older Netscapes do not support many CSS features. Our previous box cannot be coded for Netscape because a <div>'s background color and border color are not supported. Other properties, like "visibility" are supported in older Netscapes.

Summary & Exercises

You should make a point to download and install an older and newest Netscape browser. You should also download and try the Opera browser. These are essential previewing tools for any serious web developer interested in cross-browser pages.

The newer Mozilla browsers, like Netscape 6+ and Opera, refer to style properties with 'document.getElementById(div_ID).style.style_property = "value"'. These browsers support IE's "document.all", but not when referencing CSS styling properties.

Fortunately, IE also supports "document.getElementById", so that model has become the standard. It is supported by all modern browsers.

The older Gecko Netscapes, Netscape 4.7 down to 4.0, refer to CSS properties in JavaScript using 'document.div_ID.CSS_property = "value"'. Sadly, this simplicity was scrapped for the more complex "document.getElementById" model.

Not all CSS properties can be accessed with all browsers. Scrollbars are still solely accessed in IE. You just have to experiment to see which browsers support what dynamic CSS properties.

Using simple browser detection, make this page. It works in both modern browsers and Netscape 4.x.

Every web developer who gives up on coding Netscape/Mozilla workarounds, at least for the modern versions, is only contributing to Microsoft's aggressive "conquest" of the Internet. I certainly appreciate Microsoft's support of new and exciting browser features, but I'd hate to see supported code fall into singular hands.

To Next Beginning JavaScript Lesson

Back To Beginning JavaScript Index