CSS3 Pie: Adding Support for CSS3 to Internet Explorer 6, 7 and 8

CSS3 Pie (download) is a set of CSS “behaviors” that can be attached to any CSS file by way of the behavior element in order to add rendering support to Internet Explorer 6, 7 or 8 for the more popular CSS3 rendering features:

  • border-radius
  • box-shadow
  • border-image
  • multiple background images
  • linear-gradient background images

CSS3 Pie is an open source project (Apache 2) that comes in the form of a .htc file and is roughly 28k uncompressed or 12k GZipped.

Using CSS3 Pie is literally as easy as this:

#myElement {
    background: #EEE;
    padding: 2em;
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
    border-radius: 1em;
    behavior: url(PIE.htc); /* CSS3 Pie! */

The last behavior property is how to include CSS3 Pie in any style that will suddenly make it work on IE 6, 7 or 8.

I wasn’t even aware of CSS behaviors until I ran across this library then had to Google for the spec. Many people consider the practice of using behaviors bad because it’s an Internet Explorer (5+) thing only, but in this case, that is exactly what was wanted and the property (and associated JavaScript) is simply ignored by other browsers.

To see a demo of the library in action, visit the CSS3 Pie homepage using IE 6, 7 or 8 and play with the demo on the front page:

I will say that including CSS3 Pie to a theme does seem to impact browser performance for me when I live-resize the IE window. Any site not using it resizes snappily while trying to live-resize on the CSS3 Pie homepage in IE 8 is almost a 1-2 second lag every time the window repaints itself.

It does not effect the theme performance in Firefox, Chrome or Safari from what I am seeing though as was expected since the property is IE-only.

Keep in mind this is hardly a scientific measurement of “performance” in the “Render this HTML page!” sense, I’m just pointing out that the library does require some horse power to do it’s work so you’ll want to test this with all your different deployment environments to ensure that it doesn’t cripple the performance of your app in some scenarios. I am thinking primarily of a Windows Mobile device with Mobile Internet Explorer browsing to your page.

I don’t know what CSS3 Pie is doing to make all this work, but the source code for the project is not trivial and I imagine the performance issue is tied directly to how much work the JavaScript library is actually doing, combined with Internet Explorer’s less-than-amazing JavaScript engine performance.

Either way, if you have a beautiful theme that you require to work in older versions of IE, CSS3 Pie cannot be beat. I am amazed that Jason has been able to even get it to work in IE 6 and 7… that is a technical marvel to be sure.

Be sure to take a peek at the Known Issues if you plan to deploy CSS3 Pie and see if any of them affect you; the team also maintains forums for questions and discussion if you need it.

, , , , , ,

One Response to CSS3 Pie: Adding Support for CSS3 to Internet Explorer 6, 7 and 8

  1. Charles January 5, 2011 at 9:24 am #

    Thank you for the script

Leave a Reply