Everyone’s chomping at the bit to leverage new HTML5 and CSS3 features but with some older browsers not supporting them, hacks are still needed to make things work in a cross-browser fashion. We’ve seen libs that make things easier such as Remy Sharp’s html5shiv and Modernizr and now we can add another one.
Jason Johnston’s new PIE library makes it easy to rendering several of the most useful CSS3 decoration features within Internet Explorer versions 6 through 8. He took an interesting approach by using IE DHTML Behaviors to style the elements and provide the necessary functionality to emulate the CSS3 functionality. So to add rounded corners to an element, your CSS code might look like this in plain ‘ole CSS:
background: #EEE;
padding: 2em;
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 1em;
}
To add support in IE 6-8 using PIE, you’d add this:
…
behavior: url(PIE.htc);
}
PIE currently has full or partial support for:
- border-radius
- box-shadow
- border-image
- multiple background images
- linear-gradient background images
Unfortunately, there seems to only be one demo at the moment, which is border-radius rendering via the home page, but it’s still seems like a good start with a lot of future potential.
I’ve never personally used IE DHTML Behaviors or HTML Components so I looked them up and found these intro links for those who might be interested in better understanding them:
Using HTML Components to Implement DHTML Behaviors in Script
Introduction to DHTML Behaviors
