CSS3 Pie lets you add CSS 3 support to IE 6 - 8

comments

A lot of great open source projects have come along to help developers who, like me, have to offer backwards support to Internet Explorer 6 through to 8. CSS3 Pie is a pretty cool new project by Jason Johnston from 321 Creative. Want to support a lot of the great new CSS3 additions in Internet Explorer? Looks like there’s an alternative.

image So what is it?

CSS3 Pie is a new open source HTC component that can be easily added to a page to offer some of the functionality of CSS3 to older version of Internet Explorer. This is quite similar to the PNG FIX HTC from Twin Helix that allows you to add transparent PNG support to IE 6. All in all, i have to say i love solutions like this, as it shows that oober smart people out there are answering the calls of other developers the world over who have to deal with clients who have backwards compatibility requirements. Working in the Advertising industry, i have to say that IE 6 is still a pain in the arse that the HTML gunslingers at work have to deal with on a daily basis.

Supported CSS3 attributes

So far, not all of CSS3 is supported. I hope this can change with time, but for now the list is:

  • border-radius
  • box-shadow
  • border-image
  • -pie-background
  • -pie-watch-ancestors
  • rgba color values
  • gradients

How would i use it?

It’s dead easy to use right now – simply write some sample CSS 3 code like my round border-radius example below:

<style>
    #myElementWithARadius
    {
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border: 1px solid #999;
    }
</style>

Then add the HTC file to the behavior property of this same CSS class:

<style>
    #myElementWithARadius
    {
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border: 1px solid #999;
        behavior: url(/path-to-pie/PIE.htc);
    }
</style>

Done – it’s that easy!

image