Your Daily Source for Apache News and Information  
Breaking News Preferences Contribute Triggers Link Us Search About
Apache Today [Your Apache News Source] To internet.com

Security, Privacy & Building Trust for Online Business

Apache HTTPD Links
Apache XML Project
The Jakarta Project
The Apache FAQ
ApacheCon
Apache-Perl Integration Project
The Java Apache Project
Apache Project
PHP Server Side Scripting
Apache-Related Projects
The Apache Software Foundation
Apache Module Registry
The Linux Channel at internet.com
Linux Programming
Apache Today
BSD Today
Linux Today
All Linux Devices
Just Linux
Linux Planet
Enterprise Linux Today
BSD Central
PHPBuilder
Linux Apps
Linuxnewbie.org
Linux Start
Linux Central
SITE DESCRIPTIONS
Netscape 6, Part I: Detection and Scripting
Dec 5, 2000, 23 :06 UTC (7 Talkback[s]) (3113 reads) (Other stories by Yehuda Shiran)

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:

In Netscape Navigator, this line should be colored tan. Should be white in Netscape 6 and IE.



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...":

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

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>

Hello there...

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.

  Current Newswire:
perl.com: mod_perl in 30 minutes

Sun to allow open source Java implementations

SECURITY: Vulnerability in Apache for Win32 batch file processing

WebReference.com: mod_perl Developer's Cookbook

mod_l33t added to Apache Module Registry

Linux Easy Installer - Security Fixes

Daemon News: Jakarta-Tomcat on FreeBSD 4.4

Moto, a compilable server-side scripting language

SECURITY: Flaws Found in PHP Leave Web Servers Open to Attack

Everything Solaris: Apache: Handling Traffic

 Talkback(s) Name  Date
  If you want to tell us how to write..
If you want to tell us how to write for browsers, start with your publisher.
Who the hell puts a <p> tag infront of EVERY single line of text in every paragraph? Unless I make the font very small, I end up having to scroll my window right and left to read EVERY line. (And this happens in both Netscape 4 and Mozilla M18.) Duhhh!.   
  Dec 6, 2000, 06:55:55
   Re: If you want to tell us how to write..
Me to, using Opera 4.02 on WinNT 4.0, exact the same problem   
  Dec 6, 2000, 21:44:14
   Re: If you want to tell us how to write..
It is proper and standard to put a paragraph tag in front of each paragraph; the paragraph tag has nothing to do with non-wrapping text.
The wide text is caused by the code samples (which aren't wrapped).   
  Dec 7, 2000, 03:03:07
  document.getElementByID()...
What (from my interpretation anyway) the author seems to ignore, apart from near the top for browser detection, is that document.getElementByID().. works in IE too.

So it is starting to get easier to get a page to work in both IE & N6.

So rather than writing
document.all.ASpan.innerHTML = 'hello';
you would write
aspan = document.getElementByID('ASpan');
aspan.innerHTML = 'hello';

then you kill two browsers with one stone. or dom.

and the whole scrolling thing is annoying on Mozilla (Dec8/2000 nighlty) on Win2000.   
  Dec 9, 2000, 23:44:14
   Re: Re: If you want to tell us how to write..
Now the thoughtless typists who were quick to comment above should apologize for their lack of knowledge.

However, my IE 5 browser under Windows NT 4 does think there are some Javascript errors on the page. But I don't trust IE anyhow.   
  May 30, 2001, 14:24:56
  Problems in Netscape regarding Images
Sir,
I have a problem regarding Images in netscape. On clicking the image the code does not work. So in order to solve the problem what exactly should be done.
pls write it to me
Thanking you,
Nishant   
  Aug 9, 2001, 10:38:28
  javascript
The javascript on this page (switch option) doesn't even run on my computer.
I tried it in Navigator, IE5, and N6.
I'm running Windows 2000.   
  Oct 10, 2001, 20:11:36
Enter your comments below.
Your Name: Your Email Address:


Subject: CC: [will also send this talkback to an E-Mail address]
Comments:

See our talkback-policy for or guidelines on talkback content.

The 100% Pure 80211 Event
About Triggers Media Kit Security Triggers Login


All times are recorded in UTC.
Linux is a trademark of Linus Torvalds.
Powered by Linux 2.4, Apache 1.3, and PHP 4
Copyright 2002 INT Media Group, Incorporated All Rights Reserved.
Legal Notices,  Licensing, Reprints, & Permissions,  Privacy Policy.
http://www.internet.com/