Enable CSS pseudo-element selectors in Internet Explorer with IE-CSS3.js

I was looking for a plug-and-play script that enables CSS3 :nth-of-type and other CSS3 selectors in Internet Explorer. John Resig’s Sizzle is, well, incomprehensible to me (at least) and the mighty Dean Edwards’ IE7/8 scripts don’t (yet) support the CSS3 selector types I need.

Then a tweet from Keith Clark (no relation (obviously)).

@Malarkey - Andy, I’ve just finished writing a script that emulates CSS3 selector support in IE if you’re interested. #hardboiled

Interested? Do I live on an orbiting space station?

A few days of testing, recoding (to include support for @import rules), bug fixing and more testing later, Keith fired over his latest version of IE-CSS3.js. A game changer.

ie-css3.js downloads each style sheet on the page and parses it for CSS3 pseudo selectors. If a selector is found it's replaced by CSS class of a similar name. For example: div:nth-child(2) will become div._iecss-nth-child-2. Next, Robert Nyman#8217;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.

How to use IE-CSS

To use IE-CSS, include the ie-css3.js script and Robert Nyman’s DOMAssistant in the head of your document. (Your files must run on a web server because of Internet Explorer’s security policy.)

<script src="DOMAssistantCompressed-2.7.4.js" type="text/javascript"></script>
<script src="ie-css3.js" type="text/javascript"></script>

I wrap mine in Conditional Comments to serve it only to Internet Explorer versions 7 and up (I use Universal IE6 CSS for that browser).

<!--[if gte IE 7]>
<script src="DOMAssistantCompressed-2.7.4.js" type="text/javascript"></script>
<script src="ie-css3.js" type="text/javascript"></script>
<![endif]-->

Now, write your HTML as normal. As minimal and free of presentational classes and IDs as you can make it. This is the HTML from my “It’s Hardboiled” authors page.

<section class="authors">
<h1>Hardboiled authors</h1>
<div class="vcard"><!-- content --></div>
<div class="vcard"><!-- content --></div>
<div class="vcard"><!-- content --></div>
<div class="vcard"><!-- content --></div>
<div class="vcard"><!-- content --></div>
<div class="vcard"><!-- content --></div>
<div class="vcard"><!-- content --></div>
<div class="vcard"><!-- content --></div>
<div class="vcard"><!-- content --></div>
</section>

Followed by your CSS3 selector-based CSS (supported by Firefox 3.5+, Opera 10+ and Webkit).

section.authors .vcard:nth-of-type(1) { /* CSS */ }
section.authors .vcard:nth-of-type(2) { /* CSS */ }
section.authors .vcard:nth-of-type(3) { /* CSS */ }
section.authors .vcard:nth-of-type(4) { /* CSS */ }
section.authors .vcard:nth-of-type(5) { /* CSS */ }
section.authors .vcard:nth-of-type(6) { /* CSS */ }
section.authors .vcard:nth-of-type(7) { /* CSS */ }
section.authors .vcard:nth-of-type(8) { /* CSS */ }
section.authors .vcard:nth-of-type(9) { /* CSS */ }

“It’s Hardboiled” tests

“It’s Hardboiled” authors page in Safari 4

“It’s Hardboiled” authors page in Internet Explorer 8

Now it’s your turn

I hope that you will download IE-CSS and use it on your next project (I'm already trialing it on a client project), test it to its limits and feed back reports so that Keith can make it even better. For that purpose, Keith has set up a Google Group for discussions and feedback.

• IE-CSS Labs page
• IE-CSS Google Group