IE 5-8 CSS3 pseudo-class selector emulation: ie-css3.js

Posted on January 29, 2010, under JavaScript,  Bookmark it

ie-css3.js is JS Script that allows Internet Explorer browser to identify CSS3 pseudo-class selectors and render any style rules defined with them. To use it, you will have to download ie-css3.js and one of the supported JavaScript libraries and include them both in the page of your
website.

First, ie-css3.js makes a check for known JavaScript libraries and selects the one with the best CSS3 selector support. Next, the stylesheets are downloaded and each of their selectors are parsed. Any CSS3 pseudo-classes are replaced by a standard CSS class of a similar name (e.g. div:nth-child(2) becomes div.iecss-nth-child-2). After that, the detected JavaScript library is used to find the DOM nodes matching the original CSS3 selector and the same CSS class is applied to them. Finally, the stylesheet gets replaced with the new one and any elements targeted with CSS3 pseudo-classes will be styled.

A few things you should know:

  • Style sheets MUST be added using the <link> tag. Page level style sheets won’t pe parsed
  • Style sheets that use the file:// protocol will not work due to browser security restrictions
  • Style sheets MUST be hosted on the domain as the page
  • The emulation is not dynamic. The styles are fixed once they are applied. Changes to the DOM won’t be reflected.
  • The :not() pseudo selector is not supported (it’s coming though)

Do you wish to receive the latest updates as soon as they are posted? Get our RSS Feed or Subscribe to the Newsletter!

Get our RSS Feed!

Leave a Reply


* = required fields

  (will not be published)


XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Note: If you want to post CODE Snippets, please make them postable first!
(e.g. <br /> should be converted to &lt;br /&gt;)