I like progressive enhancement and keep it in mind throughout a project. However, I tend to do my IE testing towards the end which may mean I’m really doing graceful degradation. However, what ever you want to call it, the concept of making stuff work everywhere but having a bit of sparkle in the browsers that can make it happen, is a good thing. Fortunately, using the process of progressive enhancement and starting with a good foundation of semantic markup, the HTML rarely needs much work when I get it into IE. However, the CSS can be a different matter. I’ve recently been taking advantage of some of the more interesting CSS3 selectors for styling which makes IE do a big ole nothing when it doesn’t understand them. Things like:
input[type=email] label[for=name] div[class$=red] a[href^=http://]
:before :after :invalid :focus :not
p:first-of-type li:last-of-type tr:nth-child(2n+1)
There are some very interesting combinations that can be played with but one of the nice things about these selectors is it means you need fewer classes in the markup which can help readability (and page size to a degree, I guess). If you want to style all links that have an href starting with
http:// (external links) you don’t need to add
class=external to each one, just use the CSS selector
a[href^=http://]. If you want to make rows of a table have an alternating background colour use:
tr:nth-child(2n) to select every even numbered row.
And that’s it. Just make sure the path to ‘selectivizr.js’ is correct and make sure you spell selectivizr right because it’s a bit of a bugger to do.
If you hate email but still want to keep in touch, follow me on Twitter.