What is a .htc file? How it works in Internet Explorer

Question

I downloaded the .htc file and embedded it in css to get rounded corners in Internet Explorer 8. But I wonder how this works.

.curved { -moz-border-radius:10px; -webkit-border-radius:10px; behavior:url(border-radius.htc); } 

Answer 1

This HTML Component is a means of encapsulating logic on a web page. The behavior was described in the 1999 w3 CSS working draft , but (as far as I know) only Microsoft provided an implementation in IE 5, and today there are better ways to accomplish the same tasks.

See also: http://msdn.microsoft.com/en-us/library/ms531018.aspx

HTC should only be used as a backup mechanism (which demonstrates your example). Most of the possible with them is possible using standard, cross-browser CSS and JavaScript in IE 9 and above.

Regarding why this works, I assume that the behavior controls IE-specific functions, such as DHTML or VML filters, which can be used to achieve visual results that are ahead of their time (although they are now outdated).

Answer 2

All browsers provide some way to look at style sheet rules using javascript and insert new rules dynamically. IE usually returns "unknown" for something that is not supported, for example; a div p:first-child will change to div p:unknown , and a pa[href] will be returned as "UNKNOWN" in general. Fortunately, IE will find out: hover over something familiar and leave it alone.

IE also supports the so-called behaviors ; as predefined functionality, such as dynamic loading of content, as well as persistent data storage, as well as custom types of behavior that can be embedded in a .htc or .hta file. These behaviors are associated with html nodes via css and "improve" the nodes that are selected using the rule selector with the given behavior.

Comparing the above, it should be possible to create a bahavior that looks for styles for rules that IE does not support, and tricks the affected elements into applying related styles in a different way. The steps involved with this are something like:

Searching for all stylesheets for: IE does not support hover rules, Insert a new rule that IE supports, for example, with class names, and finally configure script events to switch class names. Thus: hover ,: active and: focus can be supported, and the developer does not need to do anything except behavior. Everything else works completely automatically.

Unlike versions 1 and 2, version 3 also supports dynamically added html (ajax). The difference is that 1 and 2 actively searched for the affected elements when the page loaded (so, only once), while 3 uses expressions to allow nodes to call back.

Learn more about this here.