CSS3 PIE (Progressive Internet Explorer) is a new web toolkit created by Jason Johnston, It is an open source community project that allows anyone to contribute to it.
The aim of PIE is to bring the new css3 features to Internet Explorer 6+ through the behavior property in CSS. This allows us to move forward in web design and use new CSS3 techiques without needing to worry what it would look like to users of Internet Explorer.
These techniques include: (either fully or partially at the time of writing)
- Border-Radius
- Box-Shadow
- Border-Images
- Multiple Background Images
- Linear-Gradient as a background image
also, other features are under active development.
PIE is currently in beta release, which is essentialy a testing state, so there are bugs within the system but there are known work arounds for them which are all detailed in the documentation.
In short, PIE is an incredible tool that can turn a button from a plain blue box without and depth a vibrant blue gradient with depth and rounded corners without needing to use any images!
Adding PIE To Your Site
There are multiple ways to add PIE to the site but they all share a common propery, the CSS behavior property.
It is this behavior property that loads in the PIE.htc, however there is one golden rule for this, the location placed inside the behavior rule MUST be relative to the page and not the stylesheet
For Example
If your stylesheet and PIE.htc are both inside a styles folder in your site and the page your adding PIE to is in the root, then you need to set the behavior to be “behavior:url(‘styles/PIE.htc’);” and not just “behavior:url(‘PIE.htc’);” as this will fail.
This of course will cause issues if your site spans multiple directories but uses the same stylesheet, one way to overcome this is to absolutely link to the htc, like this: “behavior:url(‘http://www.yoursite.com/styles/PIE.htc’);”. This will ensure that all pages can use the PIE.htc
Styling With PIE
Styling with PIE is much the same as styling with CSS3, but without the need to use vendor prefixes such as -moz- and -webkit-. One possible drawback to PIE is the inability to use long-handed CSS, for example, You cannot set each of the 4 corners for border-radius as individual properties, instead they need to be written shorthand into one property border-radius: 5px 3px 2px 1px;, however I personally find this easier to do anyway!
The exception to the no-vender-prefix rule is the linear background gradient, this needs to use a -pie- vendor prefix, so for example: -pie-background: linear-gradient(#EEFF99, #66EE33);, this is just a small inconvienience to what is overall a brilliant project.
For More Information On CSS3 PIE, visit their site at http://css3pie.com/
Click Here For A Downloadable Demo (For Best Results, View in Internet Explorer)
Click Here For A Live Demo (For Best Results, View in Internet Explorer)
James Agate
Roger Green
Want to chat about your project or requirements? If you call now you can talk to me directly:
