JavaScript

Use CSS3 in IE with a Slice of PIE

    Craig Buckler
    Share

    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

    With a few exceptions, there’s no need to change your existing CSS3 properties; border-radius: 5px will simply be applied in Internet Explorer. It can also monitor JavaScript behaviors, so you can use code such as:

    var myelement = document.getElementById("myelement");myelement.style.borderRadius = "20px";

    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:

    #myelement {    behavior: url(PIE.htc);    border-radius: 10px;}

    IE loads the PIE script and applies effects using Microsoft’s proprietary filters or VML to achieve the same result.

    Note: What are IE filters?

    Filters and transitions were introduced in IE4 in 1997 but most of the better options appeared in IE5.5 in 2000. Filters permit effects that are only just becoming common in CSS3. You see: IE isn’t all bad and Microsoft can be innovative!Unfortunately filters were a hack, behaved nicely only sometimes, and used horrendous code, for example:

    filter:progid:DXImageTransform.Microsoft.Shadow(Color=#000000,Direction=45);

    Filters were never likely to become a W3C standard and few developers used them.

    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.Have you tried CSS3 PIE? Is it useful, or would you prefer effects to be hidden in IE8 and earlier versions?