By Yehuda Shiran, WebReference.com

In this column we'll introduce the new Netscape 6. This is a significant milestone in the history of browser development, as it is based on open standards, and on software modules that are being developed by everyone who wants to get involved. In the long run, Netscape 6 may draw other browsers to follow the W3C standards more rigorously, and we'll all benefit from it. In the short run, though, we all need to modify our Web sites to support the new browser. Instead of two major browsers we got used to (Internet Explorer and Netscape Navigator), we need to account for the new kid on the block, Netscape 6. At least until Netscape Navigator fully retires, which may take a year or so.

Notice that Netscape opted to drop Navigator from the new browser name. When we refer in our columns to Netscape Navigator, we mean Netscape Navigator 4.x. Obviously, Netscape positions Netscape 6 as two generations above Netscape Navigator, and one generation above Internet Explorer 5.x

In this column we'll get you started on how to support Netscape 6. We'll first explain some related buzzwords such as Mozilla and Gecko. We'll teach you how to detect Netscape 6, and how to write browser-independently. Then, we'll show you which Netscape Navigator features and which Internet Explorer features are not supported by Netscape 6. We'll outline which constructs to avoid when starting a new programming project.

In this column, you will learn:

• How to distinguish between Mozilla and Gecko
• How to detect Netscape 6
• How to write three-way browser-independent code
• How to avoid Netscape Navigator proprietary features
• How to avoid Internet Explorer proprietary features

How to tell a Mozilla from a Gecko

Netscape 6 is Mozilla- and Gecko-based. Gecko is the next-generation browser engine which supports open Internet standards such as HTML, CSS, W3C DOM, XML, RDF, and JavaScript. It is mainly a layout engine, but it also includes a set of complementary browser components that make up the Mozilla engine as well as other browsers. A layout engine takes content (HTML, XML, Image Filters), and formatting information (CSS, HTML tag attributes), and renders it on the screen. It is responsible for filling the browser's content area inside the browser's window. Gecko is also used to create the browser's user interface, including menus, toolbars, etc. The motivation behind Gecko's development is to build a more interactive browser, and to give developers greater presentation control, using open and public Internet Standards.

Netscape bets heavily on Gecko. It powers all the individual components, including Navigator and Messenger. Gecko is designed to power the display of Netscape.com, enabling a much faster content display. Because it is small and open source, other companies may use it as well. Personal and other data assistants that connect to the Internet, can benefit from Gecko's Web browsing functionality. Many software developers are looking for Web browsing capability in their application, but want to avoid developing a new browser from scratch. These developers can choose the browser components they want from among the Gecko's offerings and package them to suit their specific needs.

Gecko does not package the interface modules in a coherent, user friendly Web browser application. It's done by the Mozilla browser, developed by the mozilla.org organization. The Mozilla browser can by downloaded for free from the mozilla.org site. Vendors will assemble their own Gecko-based browsers. Some will rely on the Mozilla browser. Netscape 6 is an example of a browser (by Netscape) that is both Mozilla- and Gecko-based.

Gecko includes the following components:

• Document parser (handles HTML, XML, and arbitrary document types)
• Layout engine with content model
• Style system (handles CSS, etc.)
• JavaScript runtime
• Image rendering library
• Networking library "Necko"
• Platform-specific graphics rendering and widget sets for Win32, X, and Mac
• User preferences library
• Mozilla Plug-in API to support the Navigator plug-in interface
• Open Java Interface (OJI), with Sun Java 1.2 JVM
• RDF hypertree back end
• Font library
• Security library
• Cache management system

Browser Detection

The most common pattern in your JavaScript scripts is probably the section that determines the browser type. And its structure is probably something like:

<SCRIPT LANGUAGE="JavaScript">
<!--
if (document.all) {
  document.write("Internet Explorer Detected");
}
else if (document.layers) {
  document.write("Netscape Navigator Detected");
}
else {
  document.write("Unrecognized Browser Detected");
}
// -->
</SCRIPT>

Try this script. Convince yourself it's working as expected in Internet Explorer and in Netscape Navigator. Try now in Netscape 6. You should get the "Unrecognized Browser Detection" message. Netscape 6 does not support document.all, nor does it support document.layers. Netscape 6 supports document.getElementById. But Internet Explorer supports this method as well, so you need to be careful how to write your new browser sniffer. See Webreference's updated sniffer for example. The script above should look like this now:

<SCRIPT LANGUAGE="JavaScript">
<!--
if (document.all) {
  document.write("Internet Explorer Detected");
}
else if (document.layers) {
  document.write("Netscape Navigator Detected");
}
else if (document.getElementById) {
  document.write("Netscape 6 Detected");
}
else {
  document.write("Unrecognized Browser Detected");
}
// -->
</SCRIPT>

Try this script. Notice the positive identification of Netscape 6.

<SCRIPT LANGUAGE="JavaScript">

<!--
function oldSniffer() {
  if (document.all) {
    document.write("Internet Explorer Detected");
  }
  else if (document.layers) {
    document.write("Netscape Navigator Detected");
  }
  else {
    document.write("Unrecognized Browser Detected");
  }
}

function newSniffer() {
  if (document.all) {
    document.write("Internet Explorer Detected");
  }
  else if (document.layers) {
    document.write("Netscape Navigator Detected");
  }
  else if (document.getElementById) {
    document.write("Netscape 6 Detected");
  }
  else {
    document.write("Unrecognized Browser Detected");
  }
}
// -->

</SCRIPT>

Cross-Browser Scripting

The introduction of Netscape 6 has worsen the browser-independent scripting situation, at least for the short time. No longer do you have to deal with only two browsers - there are now three major browsers to support. One good old way is to use if statements. You want to make your script as generic as possible, and use if clauses as late as possible. The following script uses this technique. The switchEntries() function is a common event handler for all browsers. The content of switchEntries() is an if statement that executes a different statement for every browser:

<FORM NAME="election">
<SELECT NAME="presidents">
<OPTION NAME="leaving">Al Gore
<OPTION SELECTED>George W. Bush
</SELECT>   
<INPUT TYPE="button" VALUE="Switch first option" onclick="switchEntries()">
</FORM>
<SCRIPT LANGUAGE="JavaScript">
<!--
function switchEntries() {
  if (document.all) {
    document.election.presidents.item(0).text = 'Bill Clinton';
  }
  else if (document.layers) {
         document.election.presidents[0].text = 'Bill Clinton';
       }
       else if (document.getElementById) {
              document.election.leaving.text = 'Bill Clinton';
            }
}
// -->
</SCRIPT>

Click the button below to see how the first option changes on the fly:

Avoiding Netscape's Proprietary Features

Netscape 6 does not support the LAYER and ILAYER elements. It means that the browser will silently ignore the <LAYER>, </LAYER>, <ILAYER>, and </ILAYER> tags. The browser will render the HTML page as if those tags are not present. Any other elements (non-LAYER) between <LAYER> and </LAYER> will be rendered as if the <LAYER> and </LAYER> are missing. Obviously, this will change the look of the page. Let's take an example. The following LAYER element includes one line of text:

<LAYER BGCOLOR="tan">
In Netscape Navigator, this line should be colored tan. Should be white in Netscape 6 and IE.
</LAYER>

Here is the rendering of this element on your browser:

The line above should be tan in Netscape Navigator. It should have a white background in Internet Explorer because IE silently ignores the LAYER tag. Similarly, Netscape 6 does not support this tag and the line above should have a white background in Netscape 6.

When Netscape 6 silently ignores the LAYER and ILAYER tags, it also ignores their attributes. These attributes include the SRC attribute by which the LAYER element links external files. The behavior of such an element is not intuitive. In Netscape Navigator, the linked in external file determines the content of the LAYER element. Since the SRC attribute is ignored in Netscape 6, the content of the LAYER element is determined by whatever is written in the HTML file between the <LAYER> and the </LAYER>. Let's take an example. The following HTML should link in a GIF file in Netscape Navigator, and should ignore the current content of the tag:

<LAYER SRC="bc.gif">
This LAYER tag links in a small GIF file (the local page mark in the columns' navigation links).
</LAYER>

Convince yourself it's working fine in Netscape Navigator. In Internet Explorer and Netscape 6, The GIF should vanish and the content rendered is the line above, "This LAYER tag links...":

Similarly to the LAYER tag, Netscape 6 does not support the NOLAYER tag. As discussed above for the LAYER tag, Netscape 6 will ignore any attributes of the LAYER tag, including the SRC attribute, which is used to import external files. Netscape 6 will render, though, any tags placed between the <NOLAYER> and </NOLAYER> tags. We now have a simple way to make a page two-way browser-independent between Netscape Navigator and Netscape 6. Place Netscape Navigator-specific content in an external file and reference is by a <LAYER SRC=...> or <ILAYER SRC=...>. Netscape 6 will ignore it silently. As for Netscape 6's specific content, enclose it between <NOLAYER> and </NOLAYER>. Netscape Navigator will silently ignore these tags and whatever is enclosed between them, while Netscape 6 will silently ignore these tags, but will render everything that is enclosed between them.

Netscape 6 does not support document.layers and other layer DOM features. Do not use the layer DOM in your JavaScript scripts either.

Netscape Navigator supports several properties and methods for setting CSS properties from JavaScript: document.tags, document.ids, document.classes, and document.contextual. Netscape 6 does not support them, so avoid them altogether.

In summary, when starting a new development, avoid the following:

• document.layers and other features of the Layer DOM
• document.tags, document.ids, document.classes, and document.contextual()
• LAYER, ILAYER, NOLAYER
• BLINK

Avoiding Internet Explorer's Proprietary Features

Since both Internet Explorer and Netscape 6 each claim to be the best W3C-compliant browser, Netscape 6 is closer to Internet Explorer than to Netscape Navigator. The first and foremost noticeable difference is that Netscape 6 does not support the document.all property. This property is in the heart of many JavaScript scripts, ours included. We even sniff for Internet Explorer by checking the existence of document.all in the browser. We showed you earlier in this column how to detect for Netscape 6, using the document.getElementById method. In fact, instead of using document.all to access elements, get them directly by document.getElementById(). If, for example, you would access an element in Internet Explorer that has an ID="foo" by document.all.foo, you would now reach it by document.getElementById("foo").

Netscape 6 does not support the Internet Explorer's proprietary MARQUEE tag. The following piece of HTML creates an effect of animation. The statement "Hello There..." scrolls to the right, every a fixed amount of time:

<MARQUEE BEHAVIOR="scroll" DIRECTION="right">Hello there...</MARQUEE>

There is no substitute for the MARQUEE tag in Netscape 6. You have to program the effect by yourself, using the DOM. We covered the DOM in Columns 40, The DOM, Part I: Analysis, through 47, A DOM-Based Snakes Game, Part II. For principles of animation, look for Column 18, JavaScript Animation, Part I, and JavaScript Animation, Part II.

Netscape 6 does not support the BGSOUND tag. Instead use the HTML3.2 EMBED, or the HTML 4.0 OBJECT tags. Also, Netscape 6 does not support Internet Explorer's document.styleSheet().addRule which sets Cascaded Style Sheet property from JavaScript.

In summary, when you start a new development now, avoid using:

• SRC attribute on DIV statements
• MARQUEE
• BGSOUND
• document.all

A Final Word

In this column we have introduced the new Netscape 6. We explained the technology behind this project, Mozilla and Gecko. We showed that Open Source is a great way to develop projects. We commented on the tricky situation we are at, having to support three major browsers. We taught you how to detect for Netscape 6, and how to write three-way browser-independent scripts. We recommended what features to avoid in Netscape Navigator and which ones to replace in Netscape Navigator.