This document is outdated and the information in it should not be relied upon. It may no longer represent web authoring best practice. Please see the web-developer documentation index page for more up-to-date documentation.
This Technote was last updated on December 14, 2000
Do you want to write Dynamic HTML that runs the same way on all browsers? This TechNote gives an overview of the tools, TechNotes, articles, and other resources on the Netscape site and elsewhere which will help you build Dynamic HTML pages which reach the widest possible audience without breaking on older browsers.
The genius of HTML was that it could be edited and viewed on any computer in the world and transmitted across the network transparently and painlessly. This liberated information from the chains which had bound it to hard drives and LANs, enabling anyone anywhere to see anything anywhere else.
The drawback of HTML was that it was static and boring. Dynamic HTML should bring HTML pages to life on any DHTML-capable browser while in the spirit of HTML remaining viewable in some form by any client on any computer. A text-only browser like Lynx will never display animations, but well designed Dynamic HTML will (in addition to being fully functional on all browsers) degrade gracefully so that the content is still viewable on older versions of the browsers and on text-only browsers for disabled accessibility and indexing by robots.
This means that the challenge today for web designers is to exploit the power of Dynamic HTML without chaining their site to any single operating system or browser and without locking out the disabled or users of earlier browsers and older operating systems.
Cross-platform and cross-browser support are both critical because content providers are striving to reach the largest possible audience and corporations want to link tightly to all their customers and suppliers over the extranet. In both situations, you don't want to lock out potential viewers, customers, advertising dollars, and sales for technical reasons like OS version or browser vendor. Your success depends upon reaching everyone. Who would buy a TV ad that could only be seen by 20-40% of the viewers? That's exactly what happens if you restrict your content to a particular OS or browser.
Building cross-platform DHTML is only easy to the extent that each browser provides a consistent foundation to build upon across platforms. For each browser, you need to figure out what functionality can be used across all the platforms you're trying to reach. Once you've figured out what functionality each browser will reliably provide across all of your target platforms (each browser's cross-platform functionality) then you need to figure out how to build your site across the three browsers (the cross-browser functionality).
Developers have been asking Netscape and Microsoft to fully support HTML 4.0 and the W3C DOM. So one approach for building cross-browser DHTML would be to wait until the standards are fully supported. However, most people want to attract more viewers and customers today, so the best approach for now is to build today upon the browsers' common functionality and to make sure you leverage as much of the standard functionality as is currently available.
Netscape and Microsoft each had their own definition of Dynamic HTML in their browsers. The W3C DOM level 1 (supported in Mozilla and Netscape 6) and W3C DOM level 2 (partially supported in Mozilla and Netscape 6) provide for the first time an industry standard way of writing Dynamic HTML. Cross-Browser DHTML is the subset of DHTML functionality which can be used compatibly across platforms and across browsers. (If you can achieve the same result in all browsers by conditionally using techniques supported by the user agent, that counts!) Cross-Browser DHTML includes:
What You Need To Know
There are already enough web technology standards to sink a battleship. The arsenal includes HTML 4.0, CSS1, CSSP, ECMA-262, W3C DOM, RDF, XML, CSS2, and every other three- and four-letter permutation of ASCII.
With so many standards, why is compatibility still and issue? Here are some of the key sources of difficulty:
This TechNote focuses on client-side techniques for achieving backward compatibility. It explains how to create a single page which degrades gracefully for older browsers. However, you can also address this problem on the server side by detecting the user's client and delivering one of several pages that have been optimized for different browsers and versions. If you are comfortable with both client-side and server-side development, often a combination of the two approaches is most efficient. To learn more about the differences between client-side and server-side solutions to this problem, read Netscape's Home Page--Part Two: Dynamic HTML and Older Browsers--What to Do?.
Cascading Style Sheets, level 1 (CSS1) makes it possible to specify the formatting and style of HTML pages in a browser and platform independent way. If you aren't familiar with CSS1, go to Netscape's Dynamic HTML Presentations page and click through Netscape's Visual Tutorial on CSS1. For more detail, see the tutorials indexed on Netscape's Dynamic HTML Additional Resources Page or read the CSS1 specification on the W3C site.
There are differences in the degree of support for CSS1 across different browsers and platforms. For an evaluation of cross browser cross platform support for CSS1, see Complete grid comparing support by property across browsers and platforms: http://www.webreview.com/style/css1/charts/mastergrid.shtml
The main point to remember is that if you would like to use a particular CSS1 property, you should first check whether your target browsers support it on each target platform.
CSSP markup makes it possible to declare HTML elements to be absolutely or relatively positioned, to define their initial position on the page, and to make the elements initially hidden or visible. If you aren't familiar with CSSP, go to Netscape's Dynamic HTML Presentations page and click through Netscape's Visual Tutorial on CSSP. For more detail, read the Positioning HTML Elements With Cascading Style Sheets specification on the W3C site. There are also numerous unofficial tutorials on the web, my favorite is Positioning With CSS2.
Netscape 6 and Mozilla do a very good job of covering W3C standards for CSSP, so if you want your code to work on these browsers make sure it is standards compliant. Where you will run into problems, is on the older browsers. We are not aware of a rigorous, independent, property-by-property comparison of Navigator 4.x and Internet Explorer's support for CSSP similar to WebReview.com's comparison of the browsers' CSS1 support. Our experience in cross-browser CSSP development has been that if you use absolute positioning, define positions in pixels, position each element independently, avoid element nesting, and test carefully, then you can achieve cross-browser layouts which look the same or very similar. Informal "safe" list for cross-browser CSSP support for Navigator 4.0/Win32, Navigator 4.0/Mac, Navigator 4.0/UNIX, and Internet Explorer 4.0/Win32 is the use of absolute positioning and pixel units for these properties:
|visibility||inherit | visible | hidden|
Keep in mind that cross-browser CSSP support does not guarantee layouts which are pixel-for-pixel identical. (Although graphic designers find this understandably disappointing, the reality is that the CSSP standard was never intended to achieve a degree of fine layout control equal to PostScript. Comparing the length of the PostScript and CSSP specifications makes that clear.) As a result, there are sometimes slight differences in positioning, borders, backgrounds, and so on. However, the degree of cross-browser compatibility is sufficient to make possible many practical applications, such as Netscape's Dynamic HTML Presentation Template.
Know Your Client!
To prevent older browsers
won't be able to understand, the SCRIPT tag has a LANGUAGE attribute with
table shows which tags will be loaded by which browsers:
excellent cross-browser DHTML API is contained in Dan Steinman's free and
thorough tutorial The
Dynamic Duo Cross-Browser DHTML. This API provides additional functionality
not included in the Setting
throughout your DHTML code.
Take special care in your handling of resize events. Resize events can cause dynamically positioned HTML elements to lose their state. There are three ways to avoid this problem:
All browsers have the ability
to create a full-screen window as a canvas for the DHTML page. On Netscape
browsers, an unsigned script can create a window the size of the entire
screen and hide all of its controls except for the title bar, which is
required to be present so the user has a way to close the window. If you
wish to hide the title bar as well, you must sign the script, and the script
must ask the user for and be granted the UniversalBrowserWrite privilege.
(This prevents hostile scripts from being able to take over the entire
screen and deny the user a way to escape.) To learn more about Netscape's
capabilities-based security model, read Danny Goodman's article Applying
Signed Scripts and visit Security
Tools are emerging to bridge the gap between Netscape DHTML and Microsoft DHTML. Following is a list of some of the tools you can choose from:
Shortly after publication
of the W3C CSS1 recommendation, Netscape and Microsoft decided that they
needed a way to position elements on the page without using tables and
invisible gifs. They coauthored a draft specification for positioning elements
called Cascading Style Sheet Positioning (CSSP) and submitted it to the
W3C. This specification was later incorporated into the W3C CSS2 recommendation.
Do you have comments, suggestions, or constructive criticism about this article? Would you like to see another hint or tip or workaround added? Do you have a cross-browser, cross-version code sample you would like to submit? Please use these links to email us:
Want Netscape to Keep You Posted on Cross-Browser DHTML?
From time to time, Netscape will release new resources to assist in cross-browser DHTML development. If you would like to be kept posted on new TechNotes, sample code, and information related to cross-browser Dynamic HTML, join the xbrowser-list mailing list. If you ever change your mind, you can click here to remove yourself from the xbrowser-list mailing list. Your email address will not be sold, bartered, or exchanged to any other organization.
Please refer to these resources for further information:
For more Internet development resources, try Netscape TechSearch.