CSS Tips & Tricks

Microsoft has provide an alternate way to bind event handlers through CSS. They have added a behavior attribute that takes one or more URLs to special code files. HTML Components uses a separate file having an extension of htc. HTML components seems to be more efficient than the expression function. Like expression, other browsers ignore the behavior attribute.

This technique is not restricted to hover. It can be used to attach various methods and event handlers. Check out Extending HTML Elements: IE Explore for additional uses of HTML Components.

Here is a simple example, the same as on the previous page. The cells in the following table are highlighted by changing the text and background color when the mouse pointer moves over the cell.

Let's look at the affected CSS.

<!-- all browsers -->
<style type="text/css">
    td {
        border: 2px inset #666;
        width: 2em;
        background-color: #666;
        color: #fff;
        text-align: center;
    }
    td:hover {
        background-color: #ff0;
        color: #000;
    }
    th:hover {
        background-color: #00f;
        color: #fff;
    }
</style>

The CSS shown above is not very remarkable. A style is coded for the td and for td:hover and th:hover. When not hovered, the headings use an inherited style coded elsewhere. Now for IE versions less than 7.

<!-- for IE version before IE 7 -->
<!--[if lt IE 7]>
    <style type="text/css">
        th {
            behavior: url(ie-hover-th.htc);
        }
        td {
            behavior: url(ie-hover-td.htc);
        }
    </style>
<![endif]-->

For IE, there is a Conditional comment shown above. Within HTML comment tags is the notation, [ if lt IE 7]>, that only IE reads. It tells IE to process the next lines if the browser is IE less than version 7. The special processing ends with <![endif]. Browsers other than IE see this block as a comment and ignore it.

Within the conditional comment is a style element having a set of style rules IE needs for th and td tags. Each style rule is composed of the behavior attribute and a value of url(file-name.htc). Next are the htc files.

The rules for file and path in the url are the same as for background images.

For ie-hover-td.htc file.

<public:component>
    <attach event="onmouseover" onevent="hover()" />
    <attach event="onmouseout" onevent="out()" />
    <script type="text/javascript">
        function hover() {
            element.style.backgroundColor = '#ff0';
            element.style.color = '#000';
        }
        function out() {
            element.style.backgroundColor = '#666';
            element.style.color = '#fff';
        }
    </script>
</public:component>

For the ie-hover-th.htc file

<public:component>
    <attach event="onmouseover" onevent="hover()" />
    <attach event="onmouseout" onevent="out()" />
    <script type="text/javascript">
        function hover() {
            element.style.backgroundColor = '#00f';
            element.style.color = '#fff';
        }
        function out() {
            element.style.backgroundColor = '';
            element.style.color = '';
        }
    </script>
</public:component>

The htc file is an XML file. The root is public:component. There are two attach elements identifying the events and the function that will handle the event. A script element contains the function declarations. Note: in htc files, element is equivalent to this in JavaScript.

Here is another example.

...and the CSS

<!-- all browsers -->
<style type="text/css">
    .demo2 {
        border: 1px solid #000;
        padding: 2px;
    }
    .demo2:hover,
    .demo2-hover {
        border: 1px solid #000;
        padding: 2px;
        color: #00f;
        font-weight: bold;
        font-variant:small-caps;
    }
</style>
<!-- for IE version before IE 7 -->
<!--[if lt IE 7]>
    <style type="text/css">
        .demo2 {
            behavior: url(ie-hover-demo2.htc);
        }
        .demo2-hover {
            behavior: url(ie-hover-demo2.htc);
        }
    </style>
<![endif]-->

...and the htc

<public:component>
    <attach event="onmouseover" onevent="hover()" />
    <attach event="onmouseout" onevent="out()" />
    <script type="text/javascript">
        function hover() {element.className = "demo2-hover";}
        function out() {element.className = "demo2";}
    </script>
</public:component>

It was possible to use only one htc file because there were no conflicting behaviors. Note: in the htc file, element is equivalent to this in JavaScript, and the binding is equivalent to assignment to an object property; e.g., elemRef.onmouseover = fx_name;.