Monday, December 22nd, 2008

Whatever? make sure your :hover works for everyone

Category: Browsers, CSS

Peter Nederlof just released version 3 of whatever:hover, his library that makes sure that :hover works just fine for the IE browsers out there.

The new version is faster, better documented, uses a CSS trick with expressions in IE to trigger the hover events in IE and now has Ajax support! (this means that new items added to the DOM after loading will also be affected by whatever:hover.

How does it work?

All browsers provide some way to look at a stylesheet’s rules using javascript, and dynamically insert new rules. Normally, IE returns “unknown” for anything it does not support, for instance; a “div p:first-child” would change into “div p:unknown”, and a “p a[href]” would be returned as “UNKNOWN” altogether. Fortunately IE recognizes :hover as something it’s familiar with, and leaves it alone.

IE also supports so called behaviors; both predefined functionality like dynamic content loading or persistent data storage, as well as custom behaviors that you can build into an .htc or .hta file. These behaviors are linked to html nodes via css, and “enhance” the nodes that are selected by a rule’s selector with the given behavior.

Combining the above, it should be possible to create a bahavior that searches the styles for rules IE doens’t support, and trick affected elements into applying the associated styles some other way. The steps involved in this are something like:

  • Search all stylesheets for :hover rules IE doesn’t support,
  • Insert a new rule IE does support, like one with class names,
  • and finally, set up script events for switching class names.

This way, :hover, :active and :focus can be supported, and as a developer you don’t have to do anything except including the behavior. Everything else runs on full automatic.

Unlike versions 1 and 2, version 3 also supports dynamically added html (ajax). The difference is that 1 and 2 actively searched for affected elements onload of the page (so; only once), whereas 3 uses expressions to let nodes do a callback themselves. Read the commented version for more details on this.

(via Jelle Ursem)

Posted by Dion Almaer at 6:10 am

3.2 rating from 22 votes


Comments feed TrackBack URI

CSS expressions are deprecated in IE8, does IE8 supports the :hover pseudoselector natively?

Comment by zachleat — December 22, 2008

That’s awesome, kudos to the man!

Comment by oopstudios — December 22, 2008

@zachleat: Even IE7 supports the :hover pseudoclass everywhere (unless there’s some bug I’m unaware of).
The problem is with IE6.

Comment by LeaVerou — December 22, 2008

there are some weird glitches even in IE7 and 8. But the script also addresses :active and :focus, not just :hover :)

Comment by Peterned — December 22, 2008

Leave a comment

You must be logged in to post a comment.