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.
Limitations of the project
- Style sheets MUST be added to the page using a
<link>tag. 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.
You can skip to the end and leave a response.
I’m really impressed by the cool things people do to make lousy products behave the way they are supposed to.
Brilliant! Sadly it is the lack of IE support that keeps from spending much time developing with CSS3, as eager as I am to start using it, it is hard for me to justify when such a huge share of the market uses incompatible browsers. There are a lot of hoops to jump through and I am curious if running this script would create a heavy server load in a high traffic environment?
I realize the phrase was copied from the library’s page, but there’s no such thing as a “pseudo selector.” These are all examples of pseudo classes, which can make up /part/ of a selector.
It might seem like an insignificant difference, but using the right terminology can make life a lot easier when reading specs. or googling for answers.
@Mariusz Nowak: “hmm.. Dean Edwards few years ago produced same solution. Do this one bring anything new ?”
IE-CSS3 is an entirely different solution. Do your research. And yes, the reason I wrote about IE-CSS3 recently was precisely because it enables selectors that Dean Edwards’ IE7 does not.
Thanks for discussing such an informative article with all of us. I’ve bookmarked your blog will come back for a re-read again. Keep up the great work. We have a Dan Kennedy Copywriting seminar that we offer to our customers you can check it out here Copywriting Tips Click here
You know, I have to tell you, I really relish this site and the useful insight. I find it to be energizing and quite enlightening. I wish there were more blogs like it. Anyway, I felt it was about time I posted a comment on CSS3 Pseudo Selectors Emulation in Internet Explorer 5-8 – CSS3 . Info – I just wanna tell you that you did a nice job on this. Cheers mate!
Please for gods sake stop misquoting and regurgitating concepts you heard (and didn’t fully understand) from genuine Web Designers. The same goes for the rest of you idiotic morons on the internet who think you can masquerade under the fake title of “Web Designer/Developer” and expect people not to recognise your complete lack of knowledge.
Craig: before you flame someone – make sure you are getting it right yourself. Zed poses an absolutely accurate point about server load – if you read the description of HOW this script works, it does so by making a separate async call to the server and re-downloading all of the .css files a second time, to be parsed by the script.
That means that the server gets a double-hit on every .css file which is ‘d. Good design will minimize this load (properly compressed / minimized .css) at least – but it -does- increase traffic.
When “so called” web-designers get on their high horse and decide to belittle other people on public forums for asking intelligent questions, it hurts our entire profession. Please put your mouth on a leash.
I just thought I would add this
Anyone who uses jQuery and wants to use the additional selectors like :nth-of-type and selectivizr will find this useful.