Dynamic HTML

Dynamic HTML, or DHTML, is the latest advance on HTML, introduced in bits and pieces with version 4 of both Mozilla and Internet Explorer. It lets webpage writers modify HTML documents dynamically and interactively.

Currently, it is a loose confederation of six technologies:

* HTML (Hypertext Markup Language),
* CSS (Cascading Style Sheets),
* CSS-P (CSS with absolute element positioning---soon to be folded into CSS2, the next version of CSS),
* a scripting language (typically Netscape's JavaScript or its Microsoft clone, JScript, or some other one like Microsoft's VBScript),
* an event model, and
* a document object model, or DOM.

Here's how it's all supposed to work: HTML, which is to be joined by XML (Extensible Markup language), or VRML (Virtual Reality Markup Language), or any other markup language, describes the structure of the page (headings, paragraphs, tables, and so on), CSS describes the style of those elements (font, color, size, and so forth), CSS-P describes the absolute position of those elements, the event model detects user and browser actions with respect to those elements (onMouseOver(), onClick(), onLoad(), and so on), and the DOM gives unified access to all the bits and pieces from a suitable scripting language. The browser parses the whole thing and runs the scripts embedded in the page.

When DHTML is completely implemented it will let designers put arbitrary elements in arbitrary styles and locations on the page dynamically and interactively, thus making possible, for example, an entire windowing system---or just about any other program---built right inside a single browser window.

Unfortunately, DHTML is currently implemented independently, and largely incompatibly, by Netscape and Microsoft from a patchwork of earlier (and somewhat buggy) technologies. Netscape uses JavaScript and Java, while Internet Explorer uses JScript and ActiveX. These technologies can bring down the user's machine if misparsed, especially on Windows 95 and 98 machines, which are notoriously lax about security and stability.

Further, earlier versions of the same two browsers are themselves buggy and instead of ignoring the new code they sometimes try to parse it, resulting in yet more crashes. Finally, other browsers, like Opera, provide even less support for DHTML. Because of all these problems DHTML has to be considered an extremely promising but as yet immature technology.

There is a major DHTML effort at the World Wide Web Consortium (W3C), the oversight committee deciding web standards, but it will take time to complete. Also, of course, the major browsers have to have time to implement those standards, and, finally, users have to have time to give up their old browsers and download the newest ones. So it's likely to be at least a year before DHTML is anything like stable. Consequently, careful webdesigners must take extreme care to make their dynamic content cross-browser compatible.

Eric Krock's article, Introduction to Cross-Browser, Cross-Platform, Backwardly Compatible JavaScript and Dynamic HTML is an excellent overview of the whole area. Danny Goodman's article, CSSP Positioning: The Dynamic DHTML DMZ, discusses the differences between the Mozilla and Explorer Document Object Models and how to bridge them. Another article of his, Dueling Event Models: A Cross-Platform Look, shows how to handle events in both Explorer and Mozilla. This site describes the Internet Explorer DOM in more detail.
The Dynamic Duo Cross-Browser DHTML page has the Web's most complete online tutorial for cross-browser DHTML.
Inside DHTML includes a set of articles on cross-browser DHTML development.
Netscape's Dynamic HTML Technology Pod includes four cross-browser DHTML TechNotes and links to sample code and articles.
Netscape's DHTML Additional Resources Page is a comprehensive list of DHTML sites and resources.
The Active Layers API is a set of freeware cross-browser DHTML objects.
the Ultimate JavaScript Client Sniffer will detect the current browser and create an object with properties indicating the vendor and version, which can then be used to steer each browser version to different pieces of code.
cross-browser JavaScript code generator for defining CSS1 rules
The writeElt( ) dhtml function provides cross-browser support for dynamically positioned elements.
Netscape's cross-browser DHTML presentation template
automatic reload code to automatically reload a page and restore its original state since Mozilla 4 doesn't properly handle window resize events.