We all gave a little cheer when Microsoft announced CSS3 support for Internet Explorer 9. Perhaps now we’ll be able to use those funky effects which have been supported in other browsers for internet-decades (a couple of years or so). Unfortunately, IE9 is still unavailable, and more likely to appear next year. In addition, it won’t be available on XP so the majority of Windows users will be stuck with IE8 at best.
In many ways, it won’t matter. IE will ignore CSS3 selectors and properties it fails to understand but, if you’re careful, your site will still work. That’s great until your client or boss demands to know why their browser lacks rounded corners. You may present a reasonable and logical argument for browser compatibility and progressive enhancement, but they don’t care. They paid good money for rounded corners, and they want them now!
Before you start slicing background images, you may be interested to hear about an alternative option:
CSS3 PIE (Progressive Internet Explorer). It’s a new project from Jason Johnston, and offers a similar solution to
Dean Edwards’ IE7 shim in that it uses JavaScript to add the following CSS3 features to IE6, 7, and 8:
• border-radius
• box-shadow
• border-image
• multiple background images
• RGBA color values, and
• gradients
How does CSS3 PIE work?
Download the PIE.htc file and put it in your CSS folder. Note that it needs to be served with a MIME type of text/x-component (their are further instructions at the end of the
Known Issues page).
You then need to add the behavior property to every element where CSS3 effects are required, for example:
You should note that CSS3 PIE is unlikely to be a viable solution in every situation and, as a beta product, problems may occur. However, it’s a great option for web developers who want to adopt CSS3 without neglecting their IE users.
