Parts of CSS3 in Internet Explorer now with CSS3 PIE

One great thing about several CSS3 properties is that they let you save bandwidth and write cleaner markup. All those extra meaningless div and span elements you used to be forced to add to create rounded corners? Not needed. The images used for the same rounded corners, for dropshadows, and for gradients? Not needed either.

Unless of course you want to achieve the same visual design in Internet Explorer. Until IE9 is out, IE users won’t get any rounded corners, dropshadows or gradients created with CSS3. So it’s either living with that (which can be an option) or back to writing markup suffering from divitis and spanitis and letting your users download loads of images. Or you could try CSS3 PIE.

PIE (Progressive Internet Explorer) uses IE Behaviors to emulate some CSS3 properties, namely border-radius, box-shadow, border-image, multiple background images, and linear-gradient background images. It works in IE 6-8.

I’ve been trying out PIE in a couple of projects recently with results that are better than I was expecting. It actually works, and pretty well too. Though it isn’t without its drawbacks:

  • IE users will need to download the PIE file, which is 12 KB gzipped
  • You need to attach the PIE Behavior to every rule that uses the supported CSS3 properties
  • All elements that have the properties PIE supports applied need to have position:relative
  • It can slow down performance when used on interactive elements like links
  • It requires JavaScript

Despite those drawbacks it is an option to consider when you have a design with rounded corners, gradients and box shadows but want to keep your markup clean, write forward-looking, flexible CSS, and save many hours that would otherwise be spent slicing images and piecing them together.

Evaluate and use with care.

Posted on September 13, 2010 in Browsers, CSS

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.