The History of DHTML

The History of DHTML

When dynamic HTML was first being developed in the mid-1990s, Netscape and Microsoft had differing ideas about what technologies should be used to make HTML more dynamic.

Netscape-Specific DHTML

Netscape brought several new technologies to the table, hoping to create more dynamic Web pages. Unfortunately, these technologies will never become standards because CSS does most of the same things and is endorsed by the W3C.

JavaScript Style Sheets (JSS) were introduced in Navigator 4 as Netscape's alternative to CSS. Like CSS, JSS lets you define how HTML tags display their content, but JSS uses JavaScript syntax. The only browser that supports JSS, however, is Navigator 4. Not even the latest versions of Netscape or Mozilla support this defunct technology.

In addition, Netscape offered HTML layers, which, like CSS positioning controls, let you control the position and visibility of elements on the screen. Again, however, only Navigator 4 supported layers, and Netscape abandoned this technology in favor of CSS positioning. I do not recommend using Netscape layers.

Although Mozilla, and by extension Firefox, inherited the mantle of Netscape browser development, it did not continue support for the Netscape-specific DHTML extensions.

Microsoft-Specific DHTML

Much of the Microsoft-specific DHTML is based on proprietary Microsoft technologies, such as ActiveX. Because ActiveX is owned by Microsoft, it is unlikely that it will ever be a cross-browser technology. In addition, legal actions have called the use of ActiveX controls into question and at the very least will make them more difficult to implement.

Microsoft also introduced dynamic visual filters (which use ActiveX controls) that let you add visual effects to graphics and text in your document. If you've ever worked with Photoshop filters, you'll most likely also understand how to work with visual filters. The problem is that these filters are not standard on all browsers, and aren't even supported in all versions of Internet Explorer.

I do not recommend using ActiveX or its visual filters except in the few cases where a similar effect can be achieved for other browsers using standard code, such as is the case with opacity (see "Setting an Element's Opacity" in Chapter 8).

Cross-Browser DHTML

For years, the inconsistencies in supported technology between the two main browsers had Web developers who wanted to remain cross-browser compatible gnashing their teeth. Fortunately, the Netscape and Microsoft specifications for DHTML did overlap (Figure 11.5), and this area of overlap prevented DHTML from becoming just another proprietary technology.

Figure 11.5. Where the two versions of dynamic HTML overlap is where you find cross-browser DHTML, including CSS, JavaScript, and the Document Object Model (DOM).

Today, browsers implement CSS, DOM, and JavaScript standards, and the use of legacy browsers (such as Navigator 4) is diminishing, so DHTML can be used for a wide variety of applications. Although there are still browser inconsistencies, it is becoming easier to code for all browsers with minimal tweaking to accommodate the eccentricities of any particular browser.

Why Should I Use DHTML?

Because you purchased this book, you've already made some commitment to using DHTML. But in case you haven't bought the book and are just flipping through and looking at the cool examples, let me try to make a balanced case for why you should use DHTML in your Web designsand warn you about some of the troubles you may face.

DHTML Advantages

Obviously, DHTML is not without its advantages or no one would use it. It has taken a few years, however, for the power of DHTML to be realized. Here are some advantages to using DHTML:

  • Supported by all browsers. DHTML is supported in every major browser, including Opera, Safari, Internet Explorer, and Firefox. These browsers are used by most of the Web-browsing public.

  • Open standards. Because DHTML uses standardized technologies that are open to any browser manufacturer, you can create your pages according to these standards and expect that, for the most part, they will display much the same on any major browser. Although there will be some inconsistencies in how the standards are implemented in each browser, the similarities outweigh the differences.

  • Change content on the fly. One of DHTML's most obvious advantages is that you can make changes to the Web page content after it has loaded, without having to reload it. This is where the dynamic in DHTML comes from.

  • Small file sizes. Like HTML, DHTML is created with text files, which are smaller than graphic files and generally render faster than alternatives such as Flash and Java.

  • No plug-ins required. If a browser supports HTML, CSS, JavaScript, and the DOM (which all modern browsers do), it supports DHTML without the need for any additional plug-ins.

  • Easy to learn. If you are already a Web designer, and you know HTML and JavaScript, you are halfway to knowing DHTML.

  • Fast development. Many of the tricks that Web designers produced with graphics and JavaScript can be developed faster with DHTML.

  • Faster Web experience. You can use DHTML to hide, show, and change content without having to load new pages. This capability speeds the performance of your site by requiring fewer calls to the server. In addition, since all DHTML code is text, it allows for fast downloads when compared to other interactive technologies such as Flash.

  • No Java programming required. Although DHTML can do many of the same things and shares some of the same syntax as Java, you do not have to learn an entire programming language to use it. Although much of the power of DHTML is based on JavaScript, which is now a full-featured programming language, you do not have to have a degree in computer science to use the basics.

  • Can add even more interaction through Ajax. As we'll explore in Part 3 of this book, DHTML and Ajax can make a powerful combination for creating responsive online applications.

DHTML Disadvantages

It's not all smooth sailing with DHTML, however. To use DHTML, you need to understand its weaknesses as well as its strengths.

  • Browser and operating-system incompatibilities. The implementation of CSS, JavaScript, and the DOM may vary slightly from browser to browser, and sometimes even between versions of the same browser on different operating systems. Although I've gone to great pains to present workaround solutions in this book, some browsers can do certain things that others simply cannot.

  • Picky, picky, picky. JavaScript and CSS are notoriously finicky when it comes to syntax. Although most browsers will still display a page even if the HTML code isn't perfect, your entire page may fail to display if you have one too many brackets in a JavaScript function or forget a semicolon in a CSS definition list. In addition, if you're using XHTML instead of HTML, which is recommended, you won't be able to get away with the mistakes you could in HTML.

  • Handheld devices. Most portable devices that can access the Internet, such as PDAs and mobile phones, have limited DHTML support or do not show up as having full support. These devices are increasingly becoming a factor in Web design, and at the very least, you will need to consider alternatives to DHTML visitors using these devices.