HTML5, CSS3, jQuery, JSON, Responsive Design...

CSS3 selectors on IE8 (lack thereof!)

Michael Brown   May 23 2012 05:03:20 PM
I used to think that Internet Explorer 8 was the first version of the product that was actually any good...until I saw IE9.  Then I realised that IE8, while a good deal better than its totally rubbish predecessors, is still deficient in a number of ways.

Problem

Take, for example, IE8's lack of support for many common CSS3 selectors.  One of these is the nth-child pseudo-selector, which amongst other things, gives designers an easy way of setting alternate colours for table rows.  Here's some CSS that you might use to do this:

.datatable tr:nth-child(odd) {
background-color: #dfe7f2;
color: #000000;
}


Here's how a simple example using a this CSS looks in a modern browser, such as Google Chrome:

Striped table CSS on Chrome


And here's how that same example looks in IE8:

Striped table CSS on IE8

Our rows are not striped on IE8 because of its lack of support for the nth-child selector.


Solution

A "shim" (a.k.a. a "polyfill") is a piece of code - JavaScript code in this case - that adds functionality to a browser that you would normally expect to be there in the first place.  As you might imagine, there are a number of shims for Internet Explorer!!  Selectrvizr is a shim that is specifically designed to add the missing CSS3 selectors to versions of Internet Explorer previous to IE9.  All you need to do is add a small (about 5kb) JavaScript library to your app and the CSS3 selectors sholud now start working.

However, you don't want to add this library for browsers that don't need it, and you can achieve this by using IE's conditional comments.  The code below will include the code for the Selectrvizr library for versions of Internet Explorer from IE6 up to IE8.  All other browsers will ignore this include:





After reworking my example to include Selectrvizr, here's how it now looks in IE8:

Striped table CSS on IE8 with Selectrvizr shim

The beauty of such a solution is that you don't need to change any of your CSS code just to accommodate the earlier IE versions.  It does rely on the user having JavaScript enabled, of course.  But really, a person using an older version of IE and with JavaScript turned off?  They're not really going to get very far with anything much, are they!


References

All examples lovingly lifted from the very excellent The CSS Anthology: 101 Essential Tips, Tricks & Hacks, 3rd Edition by Rachel Andrew.


 
Comments

1Abdalla  05/30/2013 5:37:09 AM  CSS3 selectors on IE8 (lack thereof!)

Let me try it!

About