|
JavaScript Tip:
Navigator 6.0 Breaks Your DHTML
by Tom Dahm,
Chief Operations Officer,
NetMechanic, Inc.
If you're using Dynamic HTML scripts on your site, be aware that the new version of Navigator might break your pages.
The latest version of Netscape Navigator finally hit the streets earlier this month when Netscape and American Online announced Preview Release 1 of Netscape 6. This is the first major update of Navigator since Netscape decided to hand development of the browser over to an open-source group more than two years ago.
| |
|
| |
|
| |
"...the new browser has already triggered a backlash" |
| |
|
Mozilla.org, the non-profit group that now supervises Navigator's development, generated a great deal of excitement, but dragged its feet when it came to releasing new versions of the browser. The new version of Navigator is now behind schedule, so the developers decided to skip Version 5 of the browser and release the new code as Version 6.
This new version is essentially a brand new browser, with little or no connection to older versions of Navigator. The Mozilla team rebuilt Navigator from the ground up, integrating a new rendering engine called Gecko. The new browser claims to be 100% standards compliant, featuring support for Cascading Style Sheets and XML. It promises to make life easier for Webmasters by fully supporting HTML standards and avoiding browser-specific extensions to the language.
Unfortunately, the new version has already triggered a backlash from Webmasters because of its handling of Dynamic HTML. Due to design decisions made by the Mozilla team, most dynamic HTML scripts won't work under the new browser.
Dynamic HTML is the term used to describe JavaScript programs that dynamically change Cascading Style Sheet properties, letting you hide, show, or animate parts of your Web page. DHTML scripts can create effects like drop-down menus and scrolling text. As more people use Version 4 and higher browsers, cut-and-paste versions of these scripts have become popular.
To understand how Navigator 6 can break your Dynamic HTML, you need to know a little history of how DHTML was developed.
Under the DHTML concept, every HTML element has a corresponding JavaScript object that can be dynamically manipulated. So, if you have a paragraph like the one shown here:
<P ID="Para1">Some block of text</P>
|
Then you also have a JavaScript object called "Para1" that can be used in your DHTML scripts. Your DHTML script can reference Para1 and change its text color, its position on the screen, and any other property you choose.
| |
|
| |
|
| |
"Why did they build a browser that isn't backwards compatible ?" |
| |
|
The heart of DHTML is something called the Document Object Model (DOM). The DOM defines the hierarchy that organizes JavaScript objects on your page. To be able to access the JavaScript object "Para1," you first need to know how to find it within the DOM.
Unfortunately, DHTML originated during the height of the Browser Wars between Netscape and Microsoft. As each company raced to beat the other in adding new features to their browser, both ran ahead of the World Wide Web Consortium (W3C) and the committees that define the official Web standards. As a result, each company implemented its own version of the DOM, and did so in a way that was incompatible with the other company's browser.
For example, if you want to access the "Para1" object under older versions of Netscape Navigator, you would reference it like this:
object = document.layers[para1];
|
To reference it under Microsoft Internet Explorer, you would reference it like this instead:
object = document.all[para1];
|
That's why it's common to see DHTML scripts with code like this:
if (document.layers) {
Navigator code
}
else {
Internet Explorer code
}
|
The problem is that neither of these approaches matches the version of the DOM approved by the W3C. Under the official version of the DOM, you should reference an object like this:
object = document.getElementById (Para1);
|
This method is supported by both Navigator 6 and Internet Explorer 5. So to write JavaScript to work with all newer browsers, you would need a section of code like this:
if (document.getElementById) {
IE 5 and NN 6 code
}
else if (document.layers) {
NN4 code
}
else {
IE 4 code
}
|
When implementing the official version of the DOM, the Mozilla group made the decision not to support the older, non-standard versions. As a result, the browser supports neither document.layers or document.all. That's why most DHTML scripts won't work under that browser. In contrast, Internet Explorer 5 was developed to be backward compatible and supports both the new official DOM as well as the older Microsoft version of the DOM.
Why did the Mozilla team build a browser that isn't backwards compatible? The group appears to have made a conscious decision to force JavaScript programmers to conform to the W3C standards.
That's a controversial decision, given that many Webmasters use cut-and-paste versions of DHTML scripts. Many Webmasters aren't familiar enough with JavaScript to debug their scripts, and they don't want to become JavaScript experts either. All they know is that their pages suddenly won't work.
If you use DHTML scripts on your site, we strongly recommend that you download a copy of Navigator 6 and test your pages. You can find a copy of the browser at http://www.mozilla.org.
If you use cut-and-paste DHTML scripts from a script archive, we recommend that you check for new versions of these scripts or contact the script authors.
Note that the new browser is still a preview release. At the time of release, its support for the DOM was reportedly "90% complete." We have been in contact with Netscape, and they have confirmed that the official release of the browser does not and never will support proprietary Nav4-specific and IE4-specific DOM extensions.
|
