Dave Woods - Freelance Web Design Warwickshire

Using CSS3 Selectors in Internet Explorer

CSS3 is the next big thing to really help during the web development process but any web developer that has been following the progress of CSS3 will have become increasingly frustrated at the lack of support from Internet Explorer. However Keith Clark has put together a clever solution which means you can start using some of the selectors now and they’ll even work in Internet Explorer 5 and upwards.

Keith has put together an ie.css3.js file which allows Internet Explorer to identify CSS3 pseudo selectors and render any style rules defined within them. You simply need to include his ie.css.js and the DOMAssistant JavaScript file within the head of your pages for it to work.

Supported Selectors

  • :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

There are some limitations which Keith Clark explains on the ie-css.js website but it does look very promising.

It’ll be interesting to see how Keith continues to develop ie-css3.js as there are lots of other aspects of CSS3 which a lot of web developers are crying out for (rounded corners and multiple background being among my top priorities).

My only reservation is really from an accessibility point of view as developers need to be careful that they’re not excluding any users who don’t have JavaScript available from viewing the design of a web page. If it’s used in such a way that it can be done as progressive enhancement though then I’m all for it and along with the HTML5 JavaScript file we might actually start being able to make use of CSS3 and HTML5 before Microsoft catch up with the other standards compliant browsers.

5 comments on “Using CSS3 Selectors in Internet Explorer

  1. Dave Woods Post author

    Where I can, I am doing but it depends on the client. If it has to be completely accessible and look the same to all users with or without JavaScript then obviously there’s no option other than to use HTML4.01 or XHTML1.0 but for a lot of my freelance work I have started using HTML5 and ensuring that it degrades gracefully.

  2. Johny Favourite

    Look the same to all users? That ship sailed for me ages ago! Ha ha! I get IE 7 to look ok. 6 is hit and miss and sometimes I use an ie 6 reset. Firefox and sarafi always look as good as they can. And chrome for that matter. With html 5 + css 3 it always looks good on an iphone although I’m thinkinf of writing a mobile cut down version similiar to what I do with ie 6.

  3. Dave Woods Post author

    To be honest I don’t mind still supporting IE6, I’ve been supporting it for years and I just work around the bugs as I’m coding so it’s usually pretty much spot on once the double margin bugs and haslayout fixes have been added.

    I am seriously considering going for HTML5 and CSS3 on more projects with JavaScript support but the nagging feeling of accessibility is still holding me back a little. I’d be interested to hear what other web developers opinions are on the subject though?

  4. Pingback: uberVU - social comments