Upgrading Your Web Pages For Netscape 6 (Re: To program for Netscape6)

Ian Oeschger Fri, 15 Dec 2000 16:26:54 -0800

Xtina
Here is a draft of a document that we are going to put up on Mozilla and 
at the Netscape Devedge site pretty soon. Let me know if this is useful 
to you, and please feel free to suggest changes or things you'd like to 
see in here.

-ian

Xtina wrote:

> Hi, I need to reprogramar my Web for the new navigators like Netscape6.
> Knows somebody where I can find the new syntax?
> 
> Thanks

Title: Web Standards: Upgrading Your Web Pages For Netscape 6

Web Standards: Upgrading Your Web Pages For Netscape 6

A number of elements and practices considered "standard" among web developers for adding DHTML and/or cross-browser support to their web pages were excluded from the W3C HTML 4.0 and Document Object Model specifications. Elements like <LAYER> and objects like document.layers[] and document.styleSheets[], for example, though common enough in practice and on older DHTML web pages, are actually not a part of any web standard. New, Mozilla-based browsers such as Netscape 6 that are based on standards do not support these proprietary and non-compliant elements.

This article provides an overview of the process for upgrading the content of your web pages to conform to the W3 web standards. The various sections highlight areas in which common practices are at odds with the standards and suggest replacements, and the final section, Summary of Changes, outlines all the changes described in this article.

Using standards in your web development makes your pages genuinely cross-browser and cross-platform, makes them a part of a coherent and robust document object model, makes them readable and extensible by others, and also furthers the cause of the standardization process itself.

In this document:

Layers and LAYER Elements

DIV Elements

Using the DOM

Manipulating Style Sheets

Components and Plug-ins

Other Excluded Elements

Browser Sniffing

Summary of Changes

Layers and Layer Elements

This section describes the <LAYER> element, DOM access to that element, and some strategies for replacing it with standards-compliant HTML.

Status of Layer Elements

LAYER and ILAYER are not supported by the W3 HTML 4.0 web standard or by Netscape 6. Per the HTML 4.0 specification, Netscape 6 and other Gecko-based browsers silently ignore the <LAYER>, </LAYER>, <ILAYER>, and </ILAYER> tags and render the HTML page as if those tags were not present.

If the LAYER or ILAYER element enclose other elements, those elements are rendered as content by Netscape 6. If the LAYER or ILAYER elements link in external files via their SRC attributes, those files are not included within the HTML page as the LAYER and ILAYER element and all their attributes are silently ignored by Netscape 6.

The NOLAYER element is also not supported. Per the HTML 4.0 specification, Netscape 6 and other Gecko-based browsers silently ignores the <NOLAYER> and </NOLAYER> tags and renders the HTML page as if they were not present. Keep in mind that Gecko will silently ignore the <NOLAYER> and </NOLAYER> tags themselves, but any elements enclosed between <NOLAYER> and </NOLAYER> are still rendered. This behavior in fact makes it easier to author a single page supporting Navigator 4 and Netscape 6 when necessary (see examples in table below).

Content transcluded (imported into the page) from an external file with the LAYER SRC attribute is silently ignored (and the referenced files not imported) by Netscape 6. Conversely, content enclosed between <NOLAYER> and </NOLAYER> tags is rendered by Netscape 6, though the LAYER and ILAYER tags themsevles are silently ignored. Navigator 4, on the other hand, will silently ignore the <NOLAYER> and </NOLAYER> tags and everything between them.

document.layers[] and other features of the Navigator 4 Layer DOM are similarly not supported.

Updating Layer Elements

To update web pages that use the LAYER, ILAYER, and NOLAYER elements, you can take advantage of the fact that standards-based browsers typically ignore non-compliant elements altogether. In general, the FRAME and IFRAME elements are good, standards-based replacements for LAYER and ILAYER, respectively. If you have content that you want to import into your document with the LAYER SRC=newcontent.html model, you can use IFRAME SRC=newcontent.html instead.

A good strategy for making your web page compatible with both the current standard and Netscape 4 is to use both an IFRAME element in a LAYER element. Since Netscape 4 does not support the IFRAME element, which is part of the standard, the following examples will yield equivalent results on Netscape 4 and on browsers that conform to the standard for IFRAMES:

Including an external file by wrapping IFRAME in LAYER of same name:
Nav4: LAYER rendered, IFRAME ignored
Nav6 and IE4/5: IFRAME rendered, LAYER ignored
<LAYER NAME="foo" SRC=foo.html> 
<IFRAME
      ID="foo" SRC=foo.html> 
</IFRAME> 
</LAYER>
      
 
Including an external file by wrapping LAYER in IFRAME of same name:
Nav4: LAYER rendered, IFRAME ignored
Nav6 and IE4/5: IFRAME rendered, LAYER ignored
<IFRAME ID="foo"
      SRC=foo.html> 
<LAYER NAME="foo" SRC=foo.html>
      
</LAYER> 
</IFRAME> 
 
Including an external file by using adjacent LAYER and IFRAME of same name:
Nav4: LAYER rendered, IFRAME ignored
Nav6 and IE4/5: IFRAME rendered, LAYER ignored
<LAYER NAME="foo" SRC=foo.html> 
</LAYER
      
<IFRAME ID="foo" SRC=foo.html> 
</IFRAME>
      
 
Selectively displaying some content for Nav4 (via transcluded external file) and other content for IE4+ and Nav6 (enclosing in NOLAYER so Nav4 ignores everything between <NOLAYER> and </NOLAYER>):
Nav4: LAYER rendered, NOLAYER and contents ignored
Nav6 and IE4/5: LAYER and NOLAYER ignored, DIV rendered
<LAYER NAME="nav4content" SRC=foo.html>
      
</LAYER> 
<NOLAYER><DIV ID="nav6content">
      ... bunch of elements ... </DIV></NOLAYER>

Div Elements

The DIV element is a part of the W3C HTML 4.0 standard, and as such it is supported by Netscape 6 and other standards-based browsers. The SRC attribute commonly used on the DIV to import content external to the page, however, is not a part of the official standard.

You can use DIV to create a block of text, or division. The DIV element can also be used as a general replacement for the Navigator 4 LAYER. But to transclude, or import, content from another source, you must use other means. The best way to import content into an element in your web page is to use an IFRAME with a SRC, as in the following example, where the contents of the page mylist.html are imported into the current page between the two DIV elements:

<DIV>
 <UL>
  <LI>Red</li>
  <LI>Blue</li>
  <LI>Yellow</li>
 </UL>
</DIV>

<IFRAME SRC="mylist.html" />

<DIV>
 <UL>
  <LI>Red</li>
  <LI>Blue</li>
  <LI>Yellow</li>
 </UL>
</DIV>

Using the DOM

The document objects for some browsers have properties for accessing arrays of elements and types of elements. document.tags, for example, is used by Navigator 4 to access particular elements within the object model, just as document.all[] in the Internet Explorer document object model. Many of these arrays were not made a part of the specification for the Document Object Model, and will cause JavaScript errors in standards-compliant browsers like Mozilla and Netscape 6.

The W3C Document Object Model exposes almost all of the elements in an HTML page as scriptable objects. Though the DOM1 and DOM2 standards obviate some of the tricks that web developers have used to script web page elements, in general the methods and overall object model of the DOM are much more sophisticated than the proprietary object models used in DHTML programming.

Unsupported Access Methods

The following document object properties are not supported in the W3 Document Object Model:

document.tags
document.ids
document.classes
document.elementName (e.g., getting a reference to the element <p name="yooneek" /> with document.yooneek)
document.contextual for setting CSS properties from JS

Scripts that use these properties will not execute in Netscape 6 or other standards-compliant browsers. Instead, use the DOM access methods described in the next section. Also see Manipulating Style Sheets for an example of using the DOM to access style rules.

Accessing Elements with the DOM

The best practice for getting scriptable access to an element in an HTML page is to call the Document Object Model's document.getElementById(elementID). This method returns an object reference to the uniquely identified element, which can then be used to script that element. For example, the following short sample dynamically sets the left margin of a DIV element with an ID of "inset" to half an inch:

\\ in the HTML: <DIV id="inset">Sample Text</DIV>

d = document.getElementById("inset")
d.style = "margin-left: .5in"

For accessing a group of elements, the DOM specification also includes getElementsByTagName, which returns a list of all the elements with the given tag name in the order they appear in the document:


anks = document.getElementsByTagName("A")
first_a = anks[0]
alert(first_a.href)

The DOM2 specification also includes a special version of getElementsByTagName called getElementsByTagNameNS, which returns a list of tags within a specified namespace.In addition to these access methods, the DOM provides methods for creating new elements, document fragments, attributes, new content, for traversing the content tree, and for handling events raised as the user interacts with the document itself. See the DOM specification at www.w3c.org/dom for more information about using the Document Object Model to script web pages.

Manipulating Style Sheets

Different browsers have provided different ways to access and manipulate the style rules defined for a web page. Internet Explorer's document.styleSheets property and Navigator 4's document.tags, document.classes, and document.contextual() can all be replaced with DOM Level 2 CSS interface calls, as in the following example:

Use the DOM level 2 CSS interface to add the appropriate rule to a style sheet in the document's HEAD.

<HTML>
<HEAD>
<TITLE>Demo</TITLE>
 
    <STYLE ID="ietssxyz" TYPE="text/css"></STYLE> 
    <SCRIPT LANGUAGE="JavaScript">

      <!--  var targetStyleSheetID = "ietssxyz";

      function addRuleToStyleElement (name, selector, declaration)  
      { 
        var styleSheetElement = document.getElementsByID(name); 
            var styleSheetLength =
        styleSheetElement.length;    
        styleSheetElement.insertRule (selector + " { " + declaration + " }
        ", styleSheetLength);  
      }

      addRuleToStyleElement (targetStyleSheetID, "H1", "font-size:44pt"); 
      //-->
    </SCRIPT>

Changing Style Rules Using the DOM

The following table describes standards-based methods for accessing and updating sstyle rules defined for various HTML elements in a web page.

Nav4 element.visibility = value;
IE4/5 element.style.visibility = value; DOM level 2 element.style.visibility = value;
DOM level 2 provides for the assignment of new values to the CSS visibility property using the element.style object reference. You can get the element to which that style corresponds by using the DOM's getElementById or one of the other methods described in the DOM access section above.

Nav4 element.left
IE4/5 element.style.pixelLeft DOM level 2: parseInt (element.style.left)

Nav4 element.top
IE4/5 element.style.pixelTop DOM level 2: parseInt (element.style.top)

Nav4 element.moveTo(x, y);
IE4/5 element.style.pixelLeft = x; element.style.pixelTop = y; DOM level 2: element.style.left = value + "px";
DOM level 2: element.style.top = value + "px";

W3C DOM2 Reflection of an Element's CSS Properties

See the W3C DOM2 Working Draft (work in progress) section 4.4, Extensions to Level 1 Interfaces. Keep in mind that according to this working draft, the values returned by the style property of an element reflect static settings in the element's STYLE attribute only, not the total "computed style" that includes any inherited style settings from parent elements. Therefore, if you wish to read and write these properties from JavaScript through the DOM2, use one of these two approaches:

Place all of the element's static CSS declarations (if it has any) in the element's STYLE attribute.
Use no static CSS declarations for the element, and initialize its CSS properties from JavaScript through the DOM.

W3C DOM2 Reflection of an Element's CSS Positioning Properties

See the W3C DOM2 Working Draft (work in progress) section 4.4, Extensions to Level 1 Interfaces. The values returned by the W3C DOM2 style.left and style.top properties include the CSS unit suffix (such as "px"), whereas Nav4 element.left and IE4/5 element.style.pixelLeft (and the corresponding properties for top) return an integer. So, if you want to get the element's inline STYLE settings for left and top as integers, parse the integer from the string by using parseInt(). Conversely, if you want to set the element's inline STYLE settings for left and top, make sure to construct a string that includes the unit (such as "140px") by appending the unit string to the integer value.

Components and Plug-ins

Netscape 6 uses a single archive format to install and update components and files of all kinds. This format, the XPI format, replaces the use of .jar files for SmartUpdates of binaries and .cab files for download of binaries on Internet Explorer 4 and beyond.

Excluded Element W3C Replacement

Navigator 4 .jar files and IE4+ .cab files .xpi files to support XPInstall

Also, if you have plug-in content that calls a plug-in's Java API from JavaScript via LiveConnect, be aware that the plug-in vendor must upgrade their plug-in to support the Mozilla Plug-in API. Until then, these JavaScript calls within the content will fail silently. Contact the plug-in vendor to find out their schedule for releasing an upgraded plug-in.

Other Excluded Elements

There are a number of proprietary elements used for animation and other tricks that are not a part of any web standard. This section highlights those elements and suggests practices for achieving the same effect with W3 HTML 4.0:

Excluded Element W3C Replacement

Nav2/3/4/5 BLINK CSS1 text-decoration:blink (Note: user agents are required by the CSS1 specification to recognize the blink keyword, but not to support the blink effect, so CSS1-compliant browsers may or may not make the text blink on the screen. The best approach is not to make content blink at all.)

MARQUEE HTML 4.0 DIV with content string rotated over time by JavaScript via the DOM level 1

BGSOUND Use either HTML 3.2 EMBED (which has been deprecated in HTML 4.0 but are still supported) for backward compatibility with Nav3/4, or HTML 4.0 OBJECT if you only require compatibility with Netscape 6 and IE 5 and above. Most people use EMBED to provide backward compatibility with as many browsers as possible.

EMBED HTML 4.0 OBJECT

innerHTML The innerHTML property of elements as found in IE is not a feature of the W3C DOM. The contents of an element can be set by using methods of the W3C DOM Level 1. To assure the widest interoperability of code, Netscape recommends as a matter of standard policy that developers base their code on web standards rather than proprietary extensions whenever possible. However, in response to requests from web developers, Netscape has added support for the innerHTML DOM extension to Mozilla and Netscape 6 builds after 19 May 2000 (Mozilla M16 and later, Netscape 6 PR2 and later). Developers who wish are welcome to use innerHTML, but they should be aware that innerHTML is not part of any standard and therefore code that uses it will be specific to IE4 and later, Netscape 6 PR2 and later, and browsers based on Mozilla and the Gecko layout engine.

Browser Sniffing:
Determining Which Browser Is Being Used

An important practice for doing cross-platform and DHTML development is to able to determine at runtime what sort of browser your pages are being viewed with. You must anticipate discrepancies in the way that different browsers handle HTML elements and controvert the standard Document Object Model if you are going to avoid errors in your scripts and page manipulation.

This process, often referred to as "browser sniffing," is usually handled by JavaScript functions that test the version and type of the browser and, if necessary, point the user to different pages or web content. The following is a short list of sniffing functions for different browsers:

Internet Explorer Version Detection
New Browser Sniffing Code

Internet Explorer Version Detection


appVer = navigator.appVersion;
ver = parseFloat(appVer); // Netscape and others

iePos = appVer.indexOf('MSIE');
if (iePos !=-1) {
   ver = parseFloat(appVer.substring(iePos+5,appVer.indexOf(';',iePos)))
}

New Browser Sniffing Code

In this sniffing code, the navigator object is interrogated for its version. If the version is "6", then the browser is understood to be Netscape 6. Otherwise, if the "MSIE" string is not found as part of the property, then the browser is IE5.


if (navigator.appVersion.charAt(0) == "5") {
  if (navigator.appName == "Netscape") {
      isNav6 = true
      alert('NS6')
  } 
}
else if (navigator.appVersion.indexOf("MSIE") != -1) {
      isIE = true
      alert('IE')
}

Once you determine which browser the user has, you can send them to a page that has been coded specifically for that browser, as in the following short example:


if (isIE5) { location = "otherpage.html" }
else { "thispage.html" }

Summary of Changes

This section outlines all of the element and practice updates described in this article. For a complete discussion of these items, see the sections in which they are described.

Proprietary Feature	W3C Specification Feature
Nav4 `LAYER`	HTML 4.0 `DIV`
Nav4 `ILAYER`	HTML 4.0 `IFRAME`
Nav4 `LAYER SRC=`, `ILAYER SRC=`, `DIV SRC=`	HTML 4.0 `IFRAME SRC=`
IE3/4/5 `MARQUEE`	HTML 4.0 `DIV`
Nav2/3/4/5 `BLINK`	`CSS1 text-decoration:blink`
IE 3/4/5 `BGSOUND`	HTML 3.2 `EMBED`
Nav4 `document.layers[]` IE4/5 `document.all`	DOM level 1 `document.getElementById()`
Nav4 `element.visibility = value`; IE4/5 `element.style.visibility = value;`	DOM level 2 `element.style.visibility = value;`
Nav4 `element.left` IE4/5 `element.style.pixelLeft`	DOM level 2: `parseInt (element.style.left)`
Nav4 `element.top` IE4/5 `element.style.pixelTop`	DOM level 2: `parseInt (element.style.top)`
Nav4 `element.moveTo(x, y);` IE4/5 `element.style.pixelLeft = x; element.style.pixelTop = y;`	DOM level 2: `element.style.left = value + "px";` DOM level 2: `element.style.top = value + "px";`
Nav4 `document.tags, document.ids, document.classes,` Nav4/IE4/5 `document.elementName`	DOM access methods
IE4/5 `document.styleSheets[].addRule (selector, declaration);` Nav4 `document.contextual()`	DOM Level 2 CSS Interface
Nav4 `handleEvent()`	W3C DOM Level 2 `dispatchEvent()`
Navigator 4 .jar files and IE4+ .cab files	XPI files for XPInstall
Plug-ins using LiveConnect to access the Java API from JS	Mozilla Plug-in API

Ian Oeschger

Last modified: Tue Nov 21 13:40:41 PST 2000

Excluded Element	W3C Replacement
Navigator 4 .jar files and IE4+ .cab files	.xpi files to support XPInstall