nth-child and IE8 support

Hi Lorenzo Franceschini,

Internet Explorer 11 is the current version, so at this point, IE8 is 4 versions back. According to these stats, IE8 is at about 4% usage globally and should continue to decline. If you still must support it for some specific reason (for example, perhaps you have usage statistics that indicate most of your site visitors are on IE8), then you'll need to use JavaScript or a JavaScript framework like jQuery.

After including jQuery onto the page, you could then write some code that looks like this:

$("#gallery li:nth-child(4n)").css("clear", "left");

Another thing to note is that windows XP is one of the main reasons we're still stuck with IE7 and 8. You can't upgrade past version 8. Microsoft is dropping support for xp in April I think. So in the next few months we could potentially see a bigger decline in IE8 as users upgrade. It depends on how many upgrade and how many stay with it and take the security risk.

My opinion on using modern css selectors and features (box shadows, rounded corners,...) is that if it's for purely visual reasons, like alternating row colors with nth-child, then don't worry about IE8 users. See this webpage for a blunt answer: http://dowebsitesneedtolookexactlythesameineverybrowser.com/

On the other hand, if your layout is going to be broken or certain content would become inaccessible then you should find another way to do it or have a fallback as Nick Pettit has suggested. In his example code, it looks like layout would be broken or not what is intended since he's clearing floats. So a workaround probably would be necessary if you were doing that in css.

You can take a look at Selectivizr too: http://selectivizr.com/ This adds selector support to IE6-8 by making use of one of the supported js libraries like jQuery. (See the table). Using this, you would write your css selectors like normal and you wouldn't need to write any javascript. Behind the scenes, it is probably doing something like Nick's code for you.