CSS3 support for ie6,7,8

Question

I need to add support to some css3 selectors to ie6,7,8:

• nth-child
• first-child
• last-child

I cannot use ajax to get the content of the css and parse the css3 specific selectors because the css file is very huge and it would imply having to download the same css file 2 times for each request.

I've been investigating the already parsed CSS rules available in document.styleSheets[<index>].selectorText , but when IE parses a selector that doesn't understand such as nth-child , the whole selector string is replaced by UNKNOWN. For example:

css:

ul li:nth-child(2){
  color: red;
}

javascript

console.log (document.styleSheets[0].selectorText);
/*
UNKNOWN {
  COLOR: red;
}
*/

Therefore, I cannot put css3 specific syntax inside the css file and I cannot redownload the whole css via ajax. What I've thought is to download the css file only one time via ajax and without using a <link> tag. Then parse and apply the css rules using javascript.

I don't want to do css hacks, my initial idea is to use a polyfill in javascript.

Any better ideas?

Answer 1

This is already in a comment here, but it is the best answer. Use selectivizr

selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8. Simply include the script in your pages and selectivizr will do the rest.

Here it is on Github

If this is not a workable solution, make sure that IE6-8 degrade gracefully and render a functional page. Old browsers are allowed to render sites differently :)

Answer 2

nth-child:
ul > li + li + li ... + li {}
     ^    ^    ^        ^
     1st  2nd  3rd ...  n-th


first-child:
ul > li {}


last-child:
not possible except you know how many childs are there and you use n-th child