-
201019 Jan
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 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.
-
Comments
-
01.
CyberSkull says:Comment » January 20th, 2010 at 12:59 am
I’m really impressed by the cool things people do to make lousy products behave the way they are supposed to.
-
02.
Very cool… worth a try, because IE won’t die soon :(
-
03.
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?
-
04.
hmm.. Dean Edwards few years ago produced same solution http://dean.edwards.name/IE7/ . Do this one bring anything new ?
-
05.
Nono says:Comment » January 22nd, 2010 at 9:32 am
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.
-
06.
@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.
-
07.
@ Nono – thanks for pointing out the error, I’ve corrected the article.
-
08.
If anything, it should encourage coders to start using the lesser known pseudo-classeses. I’m looking forward to trying this out.
-
09.
-
10.
-
11.
Well.. I do not support the idea that IE should have the same features as better browsers, it’s MS own fault that IE is a piece of ¤%¤%. Dont support IE and let it die slowly…
-
12.
For those that are interested, v0.9.4 of ie-css3 has been released. This version contains bug fixes for IE6 and support for new pseudos including :hover, :focus ::first-letter and ::first-line.
-
13.
These are all examples of pseudo classes, which can make up /part/ of a selector.
-
14.
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
-
15.
Hi, I found this post while searching for help with JavaScript. I have recently changed browsers from Opera to Mozilla Firefox 3.1. Just recently I seem to have a issue with loading JavaScript. Every time I browse website that requires Javascript, my browser freezes and I get a “runtime error javascript.JSException: Unknown name”. I cannot seem to find out how to fix it. Any aid is very appreciated! Thanks
-
16.
Munuswamy says:Comment » March 17th, 2010 at 9:16 am
I hadnt find the solution while using this script and libraries.
I dont know whether i had used it in correct way or not -
17.
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!
-
18.
it’s worth a try but changes via DOM scripting to the CSS won’t be reflected & that’s this script’s downfall.
-
19.
Abbas says:Comment » April 18th, 2010 at 11:41 am
Yes, its a shame about not being able to make dynamic dom changes. This script would be very useful if at some point it did since we are stuck with css2 crap browsers(Ie7, Ie8) for several years ahead.
-
20.
Zed, it’s scary to think there are so many clueless “Web Designers” like you out there contributing more stupidity to the internet. Javascript is executed client-side so how in the world would it create extra server load? It’s absolutely mind blowing how so many people just adopt the title “Web Designer” these days without the slighest bit of knowledge or experience. 95% of the time, when I hear people declare themselves “Web Designers”, I know it really means they’re broke students with a pretentious job title or a unemployed loser with a pipe dream.
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.
-
21.
I have a problem with speed. ie-css3.js and IE + table with 70 rows.
-
22.
Another handy CSS3 selector emulator for Internet Explorer. You only need to add an extra property in your CSS classes that are not recognized by IE. http://www.darlesson.com/jquery/css3-selectors-fo…
-
23.
ie-css3.js is now selectivizr, http://http://selectivizr.com/
Keith is constantly optimizing it, so it will only get better.
-
24.
I am not familiar with atag. Can someone explain or point me to an explanation of the meaning of “Style sheets MUST be added to the page using atag.”
-
25.
thanks for correcting “Style sheets MUST be added to the page using atag” to “•Style sheets MUST be added to the page using a tag”.
atag just did not make any sense to me.
-
26.
-
27.
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.
-
28.
Troy: Thanks regarding Craig! People like that make the net an unnecessarily ugly place.
Is there any real advantage of this script over more usual detect and switch schemes or is it just a time-saving tool?
-
29.
wow, awesome post.Thanks Again. Will read on…
-
30.
I just thought I would add this
https://github.com/keithclark/JQuery-Extended-Selectors
Anyone who uses jQuery and wants to use the additional selectors like :nth-of-type and selectivizr will find this useful.
-
31.
Thank you, Thank you.
Bypassing IE’s CSS parser solved my problem–many hours on this one.
-
01.
