This is page [3]
Go to page [1] [2]

[print version of this page]

Cross-Platform Compromises
(cont.)

Internet Explorer 4 DHTML

While Internet Explorer 3 (for Windows) did not even allow for swapping of images after a document loaded, IE 4 provides substantial facilities for dynamically modifying the content of a page after it has loaded. In addition, you can dynamically create content during loading with the help of VBScript or JScript, just as you could in IE 3. IE 4 exposes virtually every element defined by HTML in a document to the scripting language of your choice.

Cascading Style Sheets Level 1

Some CSS functionality was introduced in IE 3, but almost every aspect of the W3C recommendation for CSS1 is implemented in IE 4. Only a few CSS1 attributes, such as word-spacing and white-space, are missing from the IE 4 implementation.

CSS-Positioning

In addition to supporting the specifications of the working draft of CSS-Positioning that existed at the time of IE 4's release in 1997, the browser also allows you to apply CSS-P attributes to individual HTML elements-including those that are not containers. Therefore, you can assign a specific position and visibility to, say, an image, even when it is not surrounded by a container tag such as <DIV> or <SPAN>:

<IMG SRC="myFace.jpg" HEIGHT=60 WIDTH=40 
STYLE="position:absolute; left:200; top:100">

Of course, you can also assign positioning attributes to containers, if you prefer.

Dynamic Content

IE 4's rendering engine is designed in such a way that it can respond very quickly to changes in content. The browser's document object model provides access to virtually every kind of content on a page for modification after the document has loaded. For example, a script can alter the text of a specific <H1> header or the size of an image at any time. The rendering engine instantaneously reflows the page to accommodate the newly sized content. With each HTML element exposed to scripting as an object, most properties can be changed on the fly. The model even accommodates changing the HTML associated with an element. For example, you can demote an <H1> heading to an <H3> heading, with the same or different text, by adjusting one property of the original object.

Event Bubbling

As part of IE 4's document object model definition, virtually every object has event handlers that can be scripted to respond to user and system actions. For example, it is possible to associate different actions with user clicks over different headings (even if they are not visibly displayed as links) by assigning a different script statement to each heading's onClick event handler. Moreover, unless otherwise instructed by script, an event continues to "bubble up" through the HTML element containment hierarchy of the document. Consider the following simple HTML document:

<HTML>
<BODY>
<DIV>
<P>Some Text:</P>
<FORM>
<INPUT TYPE="button" VALUE="Click me"
    onClick="alert('Hi!')">
</FORM>
</DIV>
</BODY>
</HTML>

When the user clicks on the button, the click event is first processed by the onClick event handler in the button's own tag. Then the click event propagates through the FORM, DIV, and BODY elements. If the tag for one of those elements were to have an onClick event handler defined in it, the click event would trigger that handler. Event bubbling can also be programmatically canceled at any level along the way.

Transitions and Filters

Building atop the syntactical conventions of CSS1, IE 4 includes a style attribute called filter. This attribute serves double duty. One set of attribute parameters supplies extra display characteristics for certain types of HTML content. For example, you can set a filter to render content with a drop shadow or with its content flipped horizontally. The other set of attributes lets you define visual transition effects for when an object is hidden or shown, very much like the transition effects you set in presentation programs such as PowerPoint.

Downloadable Fonts

A document to be displayed in Internet Explorer 4 can embed TrueType font families downloaded from the server. You download the font via CSS style attributes:

<STYLE TYPE="text/css">
@font-face {
    font-family:familyName; 
    font-style:normal; 
    font-weight:normal; 
    src:url("someFont.eot")}
</STYLE>

With the basic font family downloaded into the browser, the family can be assigned to content via CSS styles or <FONT> tags.

Note that the downloadable font format differs between Internet Explorer and Navigator. Each browser requires that the font definition files be generated with a different tool.

Data Binding

IE 4 provides hooks for ActiveX controls and Java applets that communicate with text files or databases on the server. Elements from these server-based data sources can be associated with the content of HTML elements, essentially allowing the document to access server data without processing a CGI script. While data binding is not covered in depth in this book, I mention it here because it is one of Microsoft's dynamic content features.

Cross-Platform Strategies

If your DHTML application must run on both Netscape and Microsoft browsers, you have a choice of several deployment strategies to pursue: page branching, internal branching, common denominator design, and custom API development. In all likelihood, your application will employ a combination of these techniques to get the same (or nearly the same) results on both platforms.

No matter how you go about it, you must know the capabilities of each browser to provide equivalent experiences for users of both browsers. The rest of this article concerns the different strategies you can use to optimize compatibility.

Page Branching

Web pages that use absolute-positioned elements degrade poorly when displayed in older browsers. The positioned elements do not appear where their attributes call for, and, even worse, the elements render themselves from top to bottom in the browser window, in the order in which they appear in the HTML file. Also, any elements that are to be hidden when the page loads appear in the older browsers in their source code order.

To prevent users of older browsers from seeing visual gibberish, you should have a plan in place to direct users of non-DHTML-capable browsers to pages containing less flashy content or instructions on how to view your fancy pages. A server-side CGI program can perform this redirection by checking the USER_AGENT environment variable sent by the client at connect-time and redirecting different HTML content to each browser brand or version.

more ...