CSS3: it makes the lives of web designers easier and creates a lighter initial load footprint, right? In a perfect world, sure, but when web designers are still required to compensate for IE7 and IE9 not having much CSS3 support, these handy advances in web technology are quite neutered.

Blog Banner

How do we get around these limitations? Declare that you’d be a better project manager than the current one at Microsoft? Write angry blogs? Scream and run around in circles? Fortunately, the solution is much simpler: PIE.

CSS3 PIE is a behavior set applied to the end of a CSS rule that enables IE6-8 to render border-radius, box shadow, border-image, multiple background images, and linear-gradient (it only adds linear-gradient and border-image to IE9 because it already has support for the other features) with a simple addition to the style rule:

#style {

styles go here

behavior: url('/PIE.htc');

}

Granted, it has some limitations. Notably, that the HTC file needs to be housed in the same area that the HTML is served from. Normal HTML-based sites can easily accommodate this, but using a CMS can get a little weird and requires you to use absolute paths. This isn’t entirely a bad thing, but requires that the stylesheet not move anywhere. The PIE developers have a solution in place using a JavaScript file, but this limits the behavior to affect elements on the page as it renders, rather than something created dynamically.

Overall, it’s a band-aid solution, but a step in the right direction. While broadband modems can justify increased file sizes, slower load times are a bummer for all users, and removing the need to use images is just one step we can take to lower that footprint.