Thursday, June 4, 2009

:hover on any element in IE6 [CSS]

Everyone knows IE6 doesn't support :hover on any elements except links. We work around this by nesting elements inside links, applying styles to the links in our menus instead of their container list elements, and so on. While it's a pain that we have to do this, I think most of the time we end up with cleaner code as a result - the links in your menus should be the elements with most of the styling.

However, sometimes we come across a problem that we simply can't work around. More often than not, this means a rewriting a lot of code and even cutting features from the design.

Whatever:hover, and a few dozen similar but not-quite-as-good scripts, aim to solve this problem by adding :hover support to any element in IE6.

They do it by using a proprietary IE feature, introduced in IE 5.5, called DHTML Behaviors. DHTML Behaviors allow custom elements to be defined, and make it possible to modify and override the default behavior of standard HTML elements. The code for these behaviors is stored in HTC files and referenced using a non-standard CSS rule "behavior".
These days DHTML behaviours, like most proprietary IE features, are pretty much obsolete, but they do allow you to do some clever things to work around IE6's shortcomings.

Whatever:hover works by searching your stylesheet for :hover rules and adding mouseover and mouseout events to matching elements, emulating native :hover behavior. Weighing in at a mere 2.5k, the extra payload is so small as to be inconsequential.

In December 2008, version 3 was released and addressed one of the most critical weaknesses of the script; previously, :hover support could only be added to elements present in the HTML - elements added dynamically were stuck with the default IE limitations.

Since that's no longer an issue, and filesize isn't a problem, there only remains one concern - performance.
Adding mouseover and mouseout events to hundreds of elements is going to cause problems in any browser, so to ensure your users don't see a performance hit (remember, chances are if a machine is running IE6 the hardware's pretty dated too), I suggest the workaround be used sparingly. Continue using :hover on links where possible, but if you absolutely can't, these days you don't need to change your design or reduce functionality.

Incidentally, so far I've only found one occassion where this funcionality absolutely has to be used - the IE6 PNG fix doesn't support :hover, so if you need a rollover on a transparent image, this is the only way to accomplish it.

Visit the Whatever:hover website to read the fine details and download.

Update 2009-06-05: Version 2.0 Alpha 3 of the TwinHelix IE6 PNG Fix doesn't appear to support Whatever:hover at present, so if you need to combine the two stick with the stable Version 1.0.

No comments:

Post a Comment