With all decent browsers now being able to use some of the funky new features of CSS3 (so basically all browsers except IE6-8) we can start using rounded corners, box shadows and linear gradients.
We might be ok with letting IE8 (and lower) users just have a slightly less pretty version of the site. However, if you want to give IE uses the full lovely experience, then CSS PIE comes to the rescue!
PIE makes Internet Explorer 6-8 capable of rendering several of the most useful CSS3 decoration features.
CSS3 PIE (Progressive Internet Explorer) is a small IE attached behavior file that you add to your site and CSS that enables IE6-8 to cope with some CSS3 features.
CSS3 PIE currently supports (either fully or partially):
- border-radius
- box-shadow
- border-image
- multiple background images
- linear-gradient as background image
To add CSS3 PIE to a site, you upload the behavior file to your site and then add a line calling the file to each CSS element to want ‘PIE-ed’:
[cc lang=”css”]#csselement {
background: #fff;
padding: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
behavior: url(/path/to/PIE.htc);
}[/cc]
You can download CSS3 PIE and find out more about using it over at css3pie.com.
[Image via Karen Barefoot]
Speak your mind...