Inside Technique : HTML Text Editor : Introducing Behaviors

Wouldn't be great if you could use a feature such as HTMLArea, have it automatically work on existing browsers, all without browser detection? In the past, this would have been very wishful thinking. Internet Explorer 5.0 solves this problem with a new feature called DHTML Behaviors. DHTML Behaviors allow you to associate custom behavior with any supported HTML element or even design your own custom element. DHTML Behaviors essentially allow you to author your downlevel page and associate uplevel behaviors. This is the reverse of how many pages are currently written where the uplevel page is designed and then hacked on with browser detection scripts and so on to create a downlevel representation. Below we recreate the HTML editor, but this time we use a standard HTML TextArea element. In Internet Explorer 5.0, this TextArea is automatically converted to the HTMLArea.

Now for the really cool part. Below is the actual HTML and Style Sheet embedded in the page to create the above text box. First we list the global stylesheet and then we list the HTML fragment. No scripting is necessary!

<STYLE>
<!--
  .htmlEditor{behavior: URL(htmlarea.sct)}
-->
</STYLE>
<SPAN CLASS=htmlEditor><
  <TEXTAREA ROWS=10 COLS=20>
  </TEXTAREA>
</SPAN>

In all existing browsers except for Internet Explorer 5.0, this renders as a TextArea. In Internet Explorer 5.0, the class, htmlEditor, is associated with a new behavior defined by the file "htmlarea.sct". This works because browsers, including browsers that support CSS, will ignore properties they do not understand. Hence they ignore the IE5 CSS behavior property.

In Internet Explorer 5.0, as the document is downloaded, any defined behavior are also downloaded and applied to the corresponding elements. In the htmlarea.sct file (sct stands for scriptlet), we wrote the appropriate script that converts the TEXTAREA element to an HTMLAREA element with the editing user interface.

DHTML Behaviors are an evolution of the Internet Explorer 4.0 Scriptlet's technology. Internet Explorer 4.0 provided the first generation of encapsulating HTML behaviors by using the HTML 4.0 Object tag, while Internet Explorer 5.0 allows custom behaviors to be used by any element and even your own custom-defined element. Next, we explain why IE 5.0's Behaviors are considered the 2nd generation of scriptlets.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.