dean.edwards.name/moz-behaviors/usage/

Usage

• Behavior Files (.htc)
• Attaching with CSS
• Attaching with JavaScript
• bindings.xml
• Cross-browser Considerations
• Trouble-shooting
• Feedback

Behavior Files (.htc)

for a start, you can read these documents from Microsoft:

• Introduction to DHTML Behaviors
• Using HTML Components to Implement DHTML Behaviors in Script

the following bullet points represent rules rather than suggestions:

• your behavior (.htc) should be well-formed. In other words, it should validate as strict XML. This is because the behavior is loaded using Mozilla’s XMLHttpRequest object.

• use CDATA tags inside a script but you must comment them out:

  <script type="text/javascript">
  //<![CDATA[
  
  // mozilla requires CDATA tags for this script,
  // the code below contains the illegal xml entity "<"
  
    if (x < y) doSomething();
  
  //]]>
  </script>
  

  using CDATA tags keeps .htc files well-formed.

• in your script, refer to window.document not document:

  var element = window.document.getElementById("graph");
  

  Microsoft’s behaviors are implemented as HTML Components. Think of these as mini HTML documents embedded in the main HTML document. Within the scope of a behavior (where the script is executing), a reference to document means a reference to the behavior’s document not the containing document.

• the behavior should be defined as "lightweight" *

  <public:component lightweight="true">
  

*not sure this is true actually.

Attaching with CSS

Reference behaviors in the following manner in your style sheet:

div.drag-box {
	/* reference behaviors in the usual way for explorer */
	behavior: url(drag-box.htc);
	/* reference behaviors like this for mozilla */
	-moz-binding: url(bindings.xml#drag-box.htc);
}

Multiple bindings:

pre.html {
	/* for explorer */
	behavior: url(/my/star-html.htc) url(/my/star-light.htc);
	/* and for mozilla */
	-moz-binding: url(/my/bindings.xml#star-html.htc|star-light.htc);
}

Ensure that the file bindings.xml resides in the same directory as your behavior file(s).

Note: any kind of CSS error in your style setting will cause the behavior not to load. It may also result in the element not rendering correctly.

Attaching with JavaScript

Mozilla’s Element interface has been extended to include the addBehavior and removeBehavior* methods:

var image = document.getElementById("ticker");
image.addBehavior("ticker.htc");

* removeBehavior has not yet been implemented.

bindings.xml

The binding file bindings.xml should reside in the same directory as the behavior file(s) you wish to reference. It is not possible to reference behaviors scattered across several directories from the same binding (although it is possible to access multiple bindings from the same style sheet).

Point bindings.xml to moz-behaviors.xml. Usually this is the same directory:

<!-- provide the default path to moz-behaviors.xml
       (keep the #behavior suffix) -->
<binding id="behavior" extends="moz-behaviors.xml#behavior"/>

Update bindings.xml for each behavior you wish to reference:

<!-- reference to a dhtml behavior -->
<binding id="drag-box.htc" extends="#behavior"/>

<!-- multiple bindings -->
<binding id="star-html.htc|star-light.htc" extends="#behavior"/>

you do not need to make any other alterations to this file.

Cross-browser Considerations

When writing behaviors, use W3C specified DOM API and ECMAScript standards. Avoid proprietary Microsoft properties and methods:

var element = document.getElementById("element1");

View the compatibility table for more information.

Trouble-shooting

Microsoft Internet Explorer is a very forgiving browser. You can type any old junk into it and it’ll render what it can. The point is, if your behavior works in Explorer but doesn’t in Mozilla, don’t despair!

• first, make sure your .htc file validates as XML. If it doesn’t validate, fix it and try again.
• if you are still experiencing problems, scrutinise your code. Are you using any Microsoft proprietary properties or methods that are not supported by this wrapper?
• no? Check your CSS. Are the references correct?
• make sure there are no CSS errors in the same decalaration as the reference to your behavior.
• still no joy? Let me know about it. See below.

Feedback

To ensure the quality of this software, please feedback comments, suggestions, bug reports etc, to the author.