Was this page helpful?
Your feedback about this content is important. Let us know what you think.
Additional feedback?
1500 characters remaining
Export (0) Print
Expand All

What's New for DHTML in Internet Explorer 5.5 and Internet Tools

As of December 2011, this topic has been archived. As a result, it is no longer actively maintained. For more information, see Archived Content. For information, recommendations, and guidance regarding the current version of Internet Explorer, see Internet Explorer Developer Center.

Dave Massy
Microsoft Corporation

January 2000

Contents

Introduction
Component Model
Element Behaviors
ViewLink
Lightweight HTML Components
Frames Without Windows
PopUp
Colored Scroll Bars
Zoom
Improved CSS Support
Multimedia
Graphics
Editing

Introduction

Note
  You must be using Internet Explorer 5.5 or later to run the samples listed in this article. The latest version of Internet Explorer is available for download at http://www.microsoft.com/windows/ie/.

With Internet Explorer 5.5, users of the browser will benefit from enhancements such as improved navigation performance and support for print preview. In this article, though, I'd like to talk about what's new for DHTML content authors and developers—and how the features of Internet Explorer version 5.5 make it an exciting platform to target for development of any application user interface (UI). Areas that have received particular focus in this release include enhancements to the behavior component model, improved editing features, and support for vertical text layout, as well as some compelling visual effects—all of which I'll highlight here, with links to more detailed discussions of the features.

To make the best use of this article, it's helpful to understand previous DHTML support available in Internet Explorer. You can find full reference documentation, including samples, in the DHTML Reference.

Before describing the details of these exciting new features, I'd like to address an issue that has attracted some attention: standards support in Internet Explorer 5.5. This release of Internet Explorer improves support for standards such as CSS1, with features such as borders, margin, and padding on inline elements, and first-letter and first-line pseudo-elements. Internet Explorer also continues to support all the standards supported in previous releases, including leading support for technologies such as XML.

In each release of the product, we improve our support for standards while providing the sets of features that customers require for building real-world solutions. As we move forward with future releases of Internet Explorer, we will again evaluate which standards will be supported to offer developers a great platform for development.

For specific information about standards support for particular components or functionality, check out the new standards documentation in the DHTML Reference.

Component Model

The work on the behavior component model has focused on enabling developers to add their own custom elements for others to use in their DHTML documents. The term component model refers to a number of individual features that, when put together, allow developers to build their own DHTML elements to extend and enhance functionality. These extended or enhanced elements can then be reused in DHTML content by other developers. For example, a developer can create a tree-type list control that is as rich and robust as built-in HTML elements like INPUT, TEXTAREA, and SELECT. Built around the DHTML behavior support introduced in Internet Explorer 5, the enhanced Behavior Component Model allows the programmer to encapsulate and reuse code without encountering potential name conflicts and unforeseen style inheritance. A number of factors go into making a full and robust model for building reusable components. In this section, we'll discuss how these features play a key part in helping you to build up rich components with DHTML and make use of these components in DHTML documents.

Element Behaviors

Element behaviors are a new type of DHTML behavior introduced in Internet Explorer 5.5. Element behaviors build on the existing behavior support in Internet Explorer 5 to provide a different method of binding to an element. Like the DHTML behaviors introduced in version 5.0, element behaviors can be implemented in script or in native binary code. For clarity, we now refer to behaviors supported in Internet Explorer 5 as attached behaviors, as they are attached to any element either through CSS declaration of the behavior property or procedurally through addBehavior and removeBehavior methods. Element behaviors, by contrast, bind to the element such that they can never be detached, and they are considered to be an intrinsic part of the element being defined.

Unlike attached behaviors, only one element behavior is allowed per element—and only custom elements (those elements that have explicit namespaces) can have an element behavior. You can think of an element behavior as implementing a custom element to which you can program as though it were a standard HTML element.

Remember that attached behaviors remain appropriate for many uses, so you probably don't want to eliminate them from your DHTML repertoire. Element behaviors are not better than attached behaviors, nor do element behaviors supersede attached behaviors. They simply offer advantages to developers who want to write their own custom elements. You can still attach attached behaviors to a custom element that is implemented as an element behavior.

So what does all this talk about robust custom elements mean? Consider developing a custom element, <MYSTUFF:TREE>, for a DHTML document that provides a rich tree-control user interface. You might want to reuse the <MYSTUFF:TREE> element in your documents in the same way you would use standard HTML elements (such as DIV, SPAN, INPUT, SELECT, and so forth). However, the traditional attached behavior mechanism for elements does not allow you to reuse this tree control, because it employs a secondary attachment mechanism that takes place after the custom element has been created.

For example, if the element were to be created in script using the createElement method, and a behavior were attached using CSS, any script following createElement and referring to a method supplied by the behavior would probably fail, because the behavior would not have been attached at that moment. Element behaviors allow immediate behavior instantiation when the element is created, and when the methods provided by the behavior are reliably present. Furthermore, the element behavior can be used without fear of a change in the CSS declaration that would result in the behavior being removed unexpectedly. You can achieve this binding of the element behavior to the custom element by declaring the behavior with a processing instruction rather than using CSS.

ViewLink

The ViewLink feature allows an element behavior to use DHTML for its user interface without affecting the document in which the behavior is used. To understand what this really means, let's examine a typical DHTML behavior in Internet Explorer 5.

If we take a look at the Calendar Behavior, we see a custom element, <CAL:CALENDAR>, with a behavior attached that causes a fully dynamic calendar to be rendered so that the user can select a date. The calendar UI is displayed using DHTML—with a standard <TABLE> tag to lay out the grid of the calendar and script to provide dynamic user functionality. To display the calendar, the table must be inserted into the main document using the innerHTML property on the element. While this works, it has a number of disadvantages when you begin to build complex applications. The main document can be polluted with content of which the original document author, who used the <CAL> tag, was not aware. For example, if a style rule defines all tables as pink with purple borders of 10 pixels, the calendar will start to render in that fashion. The author of the document will think, "That's weird. I thought I told only my tables to render that way, but it's affected my calendars, too." For document authors, the fact that this component uses a table is purely an implementation detail of which authors should not have to be aware when doing their own authoring.

To prevent such fiascos, the ViewLink feature allows the author to fully encapsulate content to eliminate the possibility that the document structure of the primary document using the element behavior will be polluted. The behavior author no longer needs to worry about the document specifying styles that influence the behavior in unexpected ways.

How does ViewLink work? Building on support in Internet Explorer 5, in which document fragments can be separate from the main document, Internet Explorer version 5.5 allows us to ViewLink a separate fragment so it can render for a particular element. This allows separate fragments of DHTML to be linked together for visual effect, but remain isolated from each other as far as the object model is concerned. An updated Calendar sample that uses ViewLinks is available.

For a more in-depth discussion and full samples, see http://msdn2.microsoft.com/en-us/library/ms531428.aspx.

Lightweight HTML Components

Internet Explorer 5.5 provides an extra enhancement for the component object model—support for what we call lightweight HTML components. When you implement a behavior as an HTML component, or .htc file, the .htc file is built and parsed as a separate HTML document. While this enhancement is extremely useful for the ViewLink functionality discussed above, allowing ViewLink to declaratively define the display of the behavior for some uses, it represents an expensive overhead in terms of efficiency.

In Internet Explorer 5.5, you can mark your component as lightweight to prevent a separate HTML document from being built. This is appropriate when the HTML component file has no HTML content declared within it; if the component is marked as lightweight, only the <PUBLIC:*> declarations and the script of the component will be honored. See the documentation on the <PUBLIC:COMPONENT> element for details of how to mark a component as lightweight.

Frames Without Windows

The Internet Explorer 5.5 development team worked successfully to make frames and iframes more efficient. In previous versions of Internet Explorer, frames and iframes were implemented by hosting another instance of the main browser component for each frame. While this was a straightforward technique for implementing frames, it wasn't necessarily efficient—particularly when more than a few frames were required. Internet Explorer now uses the ViewLink technology to host HTML documents for frames, and to display the frames without having to instantiate more than one instance of the browser component.

This change offers two great benefits. First, it greatly improves the performance of frames pages, and as a result, it becomes more realistic to build an application that uses frames as components. Second, you can achieve some very cool visual effects.

In Internet Explorer 5 and earlier, iframes could not play in the world of z-index-positioned elements. While you could position an <IFRAME> element on a page, you could not lay content from the host document over the iframe using a greater z-index value. In Internet Explorer 5.5, this feature is now supported. Internet Explorer version 5.5 also supports transparent frames. By declaring the background of the frame's document to be transparent and having the container declare that it allows transparency, you can enable the background of the containing document to show through.

For more information, see Using IFRAME Elements and the accompanying sample.

PopUp

Another new feature, PopUp, allows you to display HTML content outside the boundaries of the Internet Explorer window. This is particularly useful for displaying menus or tooltips that might need to render outside the instance of the browser. In Internet Explorer 4.0 and 5, you could achieve menu and tooltip effects by using DIV elements positioned appropriately—but you could not display them outside the browser window, because they would be clipped. See Build a Pop-up Menu Using Dynamic HTML and JavaScript for more information.

Colored Scroll Bars

In Internet Explorer 5.5, DHTML documents are no longer restricted to the Windows operating system's standard gray scrollbars. You can now specify the color of scroll bars using style sheets. This feature is particularly useful when you want to create a UI with a consumer feel by coordinating the scroll-bar colors to follow the visual theme of the rest of the document. See this sample.

Zoom

Ever wanted to zoom in to a particular part of a document? In Internet Explorer 5.5, zoom is supported as a CSS property on any element. Zoom allows you to create some interesting visual effects. For example, you can display a large document on the screen and allow a user to highlight certain areas, or you can offer thumbnail views of documents. See the documentation and accompanying sample.

Improved CSS Support

The CSS styles of borders, padding, and margins are now supported on inline elements. What's an inline element? The term refers to elements, such as <SPAN> and <B>, that can wrap across lines of text, as opposed to block elements, such as <TABLE> and <DIV>, that take up a rectangular area of the page and cannot wrap (although their contents can). We've also added support for dotted and dashed borders on the border-style property in CSS, in accordance with the CSS1 recommendation.

We've added support for first-letter and first-line pseudo-elements. These elements allow you to lay out articles in the style used by newspapers and magazines, where the first letter or the first line of a paragraph has a different font size than the rest of the paragraph.

One of the most exciting and significant new features in Internet Explorer 5.5 is support for vertical text layout. This feature is extremely important for authoring in traditional Chinese and Japanese, because these languages require that text be laid out vertically from top to bottom. Until now, to render text vertically, the document author needed to use images or horizontal layout—techniques that are not conducive to rapid or optimal publishing of Chinese and Japanese content. Now, with Internet Explorer 5.5, it is possible to format text vertically by setting the newly proposed CSS writing-mode property to "tb-lr" to indicate that content should render top to bottom and left to right. The writing-mode property is being proposed as part of the International Layout W3C Working Draft.

Multimedia

HTML+TIME enables you to create media-rich interactive content by allowing you to specify when elements in different parts of the page appear, disappear, or respond to events or time values. In addition to the traditional HTML elements, such as P, DIV, and SPAN, you can control movie clips, animation, images, and audio, including DirectMusic content.

HTML+TIME enables this interactivity and richness without requiring scripting. For example, you can display an image or movie, or play a sound, in response to a click; you can also synchronize the element with the timing of other elements on the page. Accessibility support provided by the systemCaptions attribute enables you to display text when the user has chosen to display captions. Other new system attributes include systemLanguage and systemOverdubOrSubtitle, both of which select content based on the user's system settings. For example, if a page includes both French and English, it will display only French text and play the French audio if the user's system is set to French.

Animation support includes new functionality in the form of the animate, set, animateMotion, and animateColor attributes. These attributes allow you to move HTML elements on the page along a path or series of points, to change elements' color, or to change other attributes, such as height, without using script.

For highly interactive content that includes multiple narratives, ads, or instructional material, the excl element allows the user to select from multiple possibilities or media types. For example, the user can select one of multiple movies or streams to watch, and the streams can include ads that pause the main content and resume it when done. The excl element automatically disables the non-active media or HTML elements and manages the playback based on user selection.

The following HTML example shows how to incorporate HTML+TIME into a Web page, and demonstrates the streamlined syntax for HTML+TIME attributes. In Internet Explorer 5.5, the t: namespace qualifier is no longer needed for attributes (the t: prefix is still needed for HTML+TIME elements, however). For example, to specify the begin time for a movie clip, use begin instead of t:begin. The example displays the text "Space Shuttle Launch" for 12 seconds, beginning when the page loads. The clipBegin attribute causes the movie to skip immediately past the first 3 seconds of video. Movie playback begins on page load and continues for 14 seconds.

<html xmlns:t ="urn:schemas-microsoft-com:time" >
<head>
<style>
   .time { behavior: url(#default#time2) }
   t\:media { behavior: url(#default#time2) }
</style>
</head>

<body>
<p class="time" begin="0" dur="12">Space Shuttle Launch</p>

<t:media id="clip1" begin="0" dur="14" style="width=300;height=200" clipBegin="3"
src="http://www.microsoft.com/directx/dxm/samples/multimedia/media/movie/movie.avi" />
</body>
</html>

Show Me

Graphics

Internet Explorer 5.5 has significant improvements in the area of DHTML Filters and Transitions. A number of filters are provided that enable rendering of more visually appealing content on the client side without increasing the download time or requiring greater bandwidth. Some examples are the Gradient, Matrix, and AlphaImageLoader filters.

The Gradient Filter allows for color gradients to be rendered on the client side, at the resolution of the display, without the need to author images that contain a pre-determined gradient at a fixed resolution. The gradients can also contain transparency values as part of the color definition, enabling content authors to create interesting visual effects. The color values that define the gradient can be accessed and dynamically changed through the properties exposed by the filter.

The Matrix Filter enables content authors to apply arbitrary transformations to elements, combining scales and rotations. Finally, the AlphaImageLoader filter allows designers to import PNG images with per-pixel alpha color values, which blend properly with the rest of the page content.

Editing

In this release, we've worked on the HTML editing functionality both for supporting full HTML editing in place in the browser and for allowing hosts of the Internet Explorer components to build full HTML editing into their Win32 applications.

To further enhance authors' ability to write custom elements that can function in the same fashion as a standard HTML element, Internet Explorer 5.5 provides support for editable regions within an HTML document. This means that you can switch any element in a document to edit mode at any time, and allow the user full WYSIWYG (what you see is what you get) editing of rich HTML content. Developers can use these rich editing elements to do some really cool things—to create custom data entry fields for forms, for example. For more details and a sample, see contentEditable Property.

Another aspect of editing, significantly enhanced in Internet Explorer 5.5, enables applications that host the Mshtml.dll component of Internet Explorer to provide rich HTML WYSIWYG editing. Besides generally improving the editing experience, we've added hooks that enable you to allow a host to override some of the default editing behavior and that let you add value by providing enhancements of your own. For more details, see MSHTML Editing Overviews and Tutorials.

Summary

This concludes our whirlwind tour of new features supported in Internet Explorer 5.5. We hope this tour has been useful and prompts you to investigate and experiment with the new capabilities. While this release of Internet Explorer is known as a point five release, it contains major advances, and DHTML content authors will find it significant, because it allows them to build richer interactive applications.

Dave Massy works on Internet Explorer as a program manager. He spends much of his time proclaiming the advantages of Dynamic HTML to the world and enjoys seeing the amazing applications people are building with this technology. Dave also has a 1958 Jaguar that he's restoring (well, someone else is doing all the work really)—and while many of his colleagues question whether the project will ever be finished, Dave's looking forward to driving it across the United States one day in the not-too-distant future.


  
Show:
© 2015 Microsoft