Using the script
To use ie-css3 on your website you'll need to download the
ie-css3.js
script and one of the supported JavaScript libraries
and include them both in your pages as shown in the code sample.
Note: If your not using the JavaScript library in other browsers
you can move it inside the conditional comment.
<head>
<script type="text/javascript" src="[JS library]"></script>
<!--[if (gte IE 5.5)&(lte IE 8)]>
<script type="text/javascript" src="ie-css3.js"></script>
<noscript><link rel="stylesheet" href="[fallback css]" /></noscript>
<![endif]-->
</head>
Supported JavaScript Libraries
A table of JavaScript libraries that are compatiable with ie-css3 and CSS3
pseudo-class support they offer.
† = only available in IE8 standards mode.
|
jQuery 1.3 / 1.4 |
MooTools 1.2.4 |
DOMAssistant 2.7.4 |
DOMAssistant 2.8.0 |
Prototype 1.6.1 |
YUI 2.8.0 |
NWMatcher 1.2.0 |
NWMatcher 1.2.1 |
Dojo 1.4.1 |
| :nth-child |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
| :nth-last-child |
No |
No |
Yes |
Yes |
Yes |
Yes |
Buggy |
Yes |
No |
| :nth-of-type |
No |
No |
Buggy |
Yes |
Yes |
Yes |
Yes |
Yes |
No |
| :nth-last-of-type |
No |
No |
Yes |
Yes |
Yes |
Yes |
Buggy |
Yes |
No |
| :first-child |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
| :last-child |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
| :only-child |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
| :first-of-type |
No |
No |
Yes |
Yes |
Buggy |
Buggy |
Yes |
Yes |
No |
| :last-of-type |
No |
No |
Yes |
Yes |
Buggy |
Buggy |
Yes |
Yes |
No |
| :only-of-type |
No |
No |
Buggy |
Yes |
Buggy |
Buggy |
Yes |
Yes |
No |
| :empty |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
| :enabled |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
| :disabled |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
| :checked |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
| :hover |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
| :focus |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
| :target † |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
| ::first-line |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
| ::first-letter |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
Choosing a JavaScript library
The level of support offered by ie-css3 is dependent on the JavaScript
library you decide to use with it — unfortunately, not all libraries
offer the same level of CSS3 pesudo selector support.
ie-css3 will "scan your page" and automatically detect the best JavaScript
library for the job, so if your already using a library and it doesn't support
the selectors you need - just include another one.
If you need full support I recommend using either Diego Perini's
NWMatcher (v1.2.1) or
Robert Nyman's DOMAssistant (v2.8.0).
If JavaScript isn't available?
The code sample above uses the <noscript> tag to load a fallback style sheet
into IE if JavaScript is disabled in the browser. You can use this style sheet to fix your CSS in IE
as you would normally.
How does it work?
First off, ie-css3.js checks the page for known JavaScript libraries and picks the one with the
best CSS3 selector support.
Next, the style sheets on the page are downloaded and each of their selectors
are parsed. Any CSS3 pseduo-classes are replaced by a standard CSS class of a similar name. For example:
div:nth-child(2) will become div.iecss-nth-child-2. The detected JavaScript
library is then used to find the DOM nodes matching the original CSS3 selector and the same CSS class
is applied to them.
Finally, the original style sheet is replaced with the new version and any elements targeted
with CSS3 pseudo-classes will be styled.
A few things you should know:
DOWNLOAD NOW 
Browse
On twitter
Get in touch
<link>tag. You can still use @import in your style sheets. Page level style sheets won't be parsedfile://protocol will not work due to browser security restrictions.