CSS3 Pseudo-Class Selectors Emulation in Internet Explorer

CSS3 Pseudo-Class Selectors Emulation in Internet Explorer

Keith Clark, an independent web developer from the UK, has developed a JavaScript solution to IE’s CSS3 shortcomings in relation to CSS3 selectors. CSS3 selectors became the first W3C module to reach proposed recommendation status back in December 2009.
His ie-css3.js project (currently in beta) allows Internet Explorer, versions 5 through 8, to identify CSS3 pseudo-class selectors and render any style rules defined with them. All this is achieved by simply including the script, along with Robert Nyman’s DomAssistant, within the head element of your web pages.

Supported Pseudo-Classes

• :nth-child
• :nth-last-child
• :nth-of-type
• :nth-last-of-type
• :first-child
• :last-child
• :only-child
• :first-of-type
• :only-of-type
• :empty

Limitations of the project

• Style sheets MUST be added to the page using atag. Page level stylesheets or inline styles won’t work. You can still use @import in your style sheets.
• Style sheets MUST be hosted on the domain as the page.
• Style sheets using file:// protocol will not work due to browser security restrictions.
• The :not() pseudo-class is not supported.
• The emulation is not dynamic. Once the styles are applied they are fixed so changes to the DOM won’t be reflected.

How does it work?

ie-css3.js downloads each style sheet on the page and parses it for CSS3 pseudo-class selectors. If a selector is found it’s replaced by a CSS class of a similar name. For example: div:nth-child(2) will become div._iecss-nth-child-2. Next, Robert Nyman’s DOMAssistant is used to find the DOM nodes matching the original CSS3 selector and the same CSS class is applied them.
Finally, the original stylesheet is replaced with the new version and any elements targeted with CSS3 selectors will be styled.

Bypassing IE’s CSS parser

In accordance with the W3C specs, a web browser should discard style rules it doesn’t understand. This presents a problem — we need access to the CSS3 selectors in the style sheet but IE throws them away.
To avoid this issue each style sheet is downloaded using a XMLHttpRequest. This allows the script to bypass the browsers internal CSS parser and gain access to the raw CSS file.

Find out more and Download

ie-css3.js is released under the MIT License and can be downloaded from the project page on Keith Clark’s website.
You’ll also need to download Robert Nyman’s DOMAssistant.