The CSS3 PIE Needs Time to Bake

Last year I wrote a few CSS3 articles and lamented the fact that these cool graphical effects are rendered useless in Internet Explorer; at least until IE9 is officially launched. Then along came PIE (Progressive Internet Explorer), who made a valiant effort to make IE compatible with CSS3.

One of the more widely used CSS3 features is creating rounded corners without the need of images. This saves developers and designers an immense amount of time when creating web pages. A few lines of code replaces the need for several graphic files and the use of tables. For example:

#myElement {

  background: #EEE;

  padding: 2em;

  -moz-border-radius: 1em;

  -webkit-border-radius: 1em;

  border-radius: 1em;

}

The problem is with Microsoft’s Internet Explorer browser. While your boxes have a nice rounded effect in the majority of modern browsers, in IE, they are rendered moot. This is where PIE attempts to correct the situation. Their site describes PIE as, "...an IE attached behavior which, when applied to an element, allows IE to recognize and display a number of CSS3 properties."

By simply adding behavior: url(PIE.htc); to your code your rounded corners should appear in IE. This should lend consistency to your site’s appearance no matter what browser your visitors use. Currently, PIE supports the following:

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

PIE’s site states that they are actively developing additional features.

Of course, there's more to PIE than just adding that one line of extra code. You do need to download PIE and upload the PIE.htc file to the appropriate server. After that, you need to update your currently existing HTML documents by adding in:

behavior: url(path/to/PIE.htc);

And don’t forget to update the path to the specific location of where you uploaded the PIE.htc file.

The Drawbacks

There are a few known issues with using PIE. For example, if you’re using z-index or relative positions for your elements, you might be out of luck without having to re-position everything to position:relative. Otherwise, the problem is that PIE places the desired effect behind the element, rendering it ineffective in IE. Even if you can overcome this issue, you could encounter several other drawbacks. Take this into consideration before using PIE--there are two main forum topics on the PIE site--General Discussion and Troubleshooting Help. The General Discussion has 64 topics and 265 posts while Troubleshooting has 294 topics and 1143 posts.

What you might find interesting is the PIE in Action topic. This where developers who got PIE to work post links to their sites. You’ll notice something very similar between all the sites. If you open the links using Mozilla, it loads fine, no problem. However, when you open the links in IE, the page loads very slowly. Also, at first, the page renders with square borders on the elements. Then, it kind of pops and the squares are replaced with the rounded corners. The .htc file does not effect the page loading speeds for browsers like Mozilla, because PIE only works when it detects IE.

I find that popping to be more distracting than it is beneficial. I’d almost prefer my sites to have the square edges and load quickly in IE rather than to have slow pages that pop.

To be fair, this is an open source project and it is still in version 1 beta. I give PIE kudos to taking on such a monumental task as making IE CSS3 compliant. However, I cannot recommend it for developers except as a fun tool to play with during the off hours. Ultimately though, developers should still hold tight until the release of IE9 to see CSS3 in action.