CSS3 is a very exciting stage for anyone in the web design industry as it adds some new crazy-powerful styling features to your web design toolkit. In a nut shell, CSS3 PIE makes properties such as border-radius, box-shadow, border-image, multiple background images, linear-gradient as background image display correctly in Internet Explorer web browsers.

PIE stands for Progressive Internet Explorer. It is an IE attached behavior which, when applied to an element, allows IE to recognize and display a number of CSS3 properties.

I thank Bronson Quick for sharing breaking the news of CSS3 PIE during his presentation at the July 2010 Brisbane Web Design meetup in Brisbane. His presentation focused on new CSS3 features and how they could be used today – surprisingly his findings with CSS3 PIE showed many of CSS3′s features we wished would work in IE was now a reality, with near perfect stylings available in IE6, IE7 and IE8 web browsers. Amazing!

I recently experimented with CSS3 PIE, implementing it on a client’s site (see: Brisbane Billycarts) that features a lot of HTML5 and CSS3 markup. I’m totally blown away by the results when viewing the site in IE now. The Brisbane Billycarts website launched in March this year, and we agreed the user experience would be different for IE users – a trade off to enhance the user experience with CSS3 style for modern browser users. However now with the addition of PIE the user experience is extremely similar to that experienced by Firefox, Chrome and Safari browser users. What PIE has done is simply amazing!

CSS3 PIE Tips

• Use absolute URL’s in multiple background image situations and behaviour areas ie: behaviour: url(/pie/PIE.htc)
• I found RGBa didn’t work with border-radius styles. Simply use a HEX colour value instead.
• You can specify a CSS3 PIE style-only with the vendors prefix ie: -pie-background or -pie-box-shadow etc.
• Read the Known Issues article, then read it again. You’ll probably experience one of these at some point.

PIE is developed by Jason Johnston. PIE is also free and opensource. Visit the PIE CSS3 website for demo’s and downloads. Definitely consider a donation for Jason too. His work will most likely make the life of many web designers a much happier one, if it hasn’t already.

Tags: CSS3