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
<head> tag as shown below — that's really all there is to it.
<head>
<script type="text/javascript" src="[..library..]"></script>
<!--[if (gte IE 5.5)&(lte IE 8)]>
<script type="text/javascript" src="ie-css3.js"></script>
<![endif]-->
</head>
Note: If your not using the JavaScript library in other browsers you can add that
inside the IE conditional comment too.
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 Robert Nyman's
DOMAssistant (v2.8.0)
or Diego Perini's NWMatcher (v1.2.1).
A few things you should know:
A table of JavaScript libraries that are compatiable with ie-css3 and CSS3
pseudo-class support they offer.
|
jQuery 1.3 / 1.4 |
MooTools 1.2.4 |
DOMAssistant 2.7.4 |
DOMAssistant 2.8.0 (beta 2) |
Prototype 1.6.1 |
YUI 2.8.0 |
NWMatcher 1.2.0 |
NWMatcher 1.2.1 |
| :nth-child |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
| :nth-last-child |
No |
No |
Yes |
Yes |
Yes |
Yes |
Buggy |
Yes |
| :nth-of-type |
No |
No |
Buggy |
Yes |
Yes |
Yes |
Yes |
Yes |
| :nth-last-of-type |
No |
No |
Yes |
Yes |
Yes |
Yes |
Buggy |
Yes |
| :first-child |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
| :last-child |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
| :only-child |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
| :first-of-type |
No |
No |
Yes |
Yes |
Buggy |
Buggy |
Yes |
Yes |
| :last-of-type |
No |
No |
Yes |
Yes |
Buggy |
Buggy |
Yes |
Yes |
| :only-of-type |
No |
No |
Buggy |
Yes |
Buggy |
Buggy |
Yes |
Yes |
| :empty |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
| :enabled |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
| :disabled |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
| :checked |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
| :hover |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
| :focus |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
| ::first-line |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
| ::first-letter |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
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 stylesheet is replaced with the new version and any elements targeted
with CSS3 pseudo-classes will be styled.
DOWNLOAD NOW 
Browse
On twitter
Get in touch
<link>tag. You can still use the @import in your style sheets.file://protocol will not work due to browser security restrictions.