I remember a few years when I first took the plunge, developing a website design with substantial CSS3 properties. Having mastered the basics of rounded corners, shadows and gradients – I was very pleased with the crisp, fast loading layout that gave me the opportunity to use CSS3 in the real world. If only it was that simple! Having no IE 6-8 fallback (not to be missed by my client during the development phase), meant additional development time creating image-based fallbacks.
Today however, Jason Johnston of Sencha Labs has gifted us with CSS3 Pie – A plugin that uses IE behaviours to render the following useful CSS3 decoration properties:
- border-radius
- box-shadow
- border-image
- multiple background images
- linear-gradient as background image
Unashamedly I’m known to use the border-radius and box-shadow properties quite regularly - particularly for things like buttons and sections, so I’ve found CSS3 Pie to be incredibly helpful. Stephen, a colleague of mine, had mentioned it to me before having personally used it, but after reading an article in Web Designer Mag’s Summer ‘Bookazine’, I took it for a spin on a project I’m currently developing.
Video Demonstration & Installation Tips
Although still in its’ infancy (currently version 1.0.0) looks to be stable and does exactly what it says on the tin. In the video embedded below, I’ll show you CSS3 PIE in action, and also give you a quick ‘how-to’ on the unusual installation.
How CSS3 Pie Works
Once downloaded and deployed on your remote view; the key item is the PIE.htc file that contains the behaviour for IE. As you’ll see below in the CSS snippet, you simply reference the PIE.htc behaviour (or behavior in HTML spelling) to ensure that the CSS3 properties within your Selector (#meatpie).
#meatpie {
border: 1px solid #999;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
behavior: url(path/to/PIE.htc);
}
The only catch is that you need to reference this behaviour within EACH Selector that uses CSS3 properties that are compatible with CSS3 Pie (bulleted above).
The tricky install
As mentioned in the video, it took me at least 20 minutes to get PIE working. This is probably due to my habit of not reading instructions first, but it can take a little bit of testing - particularly if you’re Apache server doesn’t want to play-ball with the .htc content-type handling. If you’re having issues with installation – check out the video above where I explain the contents of the Download folder and where to store the files. Below you’ll also find the .htaccess code that you may need to use to ensure Apache handles the .htc correctly:
AddType text/x-component .htc
Download CSS3 PIE & find out more
To download the latest copy of CSS3 PIE, simply click here – or ahead over to the CSS3 PIE website for more information, documentation and live examples of websites using the plugin. It’s also great to see some planned improvements and expansion for the project, including further reduction to the 45KB filesize and support for other CSS3 properties. CSS3 PIE is another fantastic tool in my development toolbox. I just wish I had this a few years ago!
