CSS3 for everyone – even IE6

CSS3 is here and ready to use, no doubt. But what about legacy browsers, that bring little to no support for this technology? Yes, that’s Internet Explorer 6 to 8 I am speaking of. In general the answer is graceful degradation/progressive enhancement meaning to give all the shiny new CSS3 glory to the capable browsers and a stripped down, but still perfectly usable version to the ancient ones.

But there are times, like at the website I mainly design for, where you also need rounded corners and gradients for the Internet Explorers (don’t ask me why, it would be too difficult to describe). And that’s when the really great script called CSS3 Pie comes into play. It’s an IE attached behavior that allows for the following CSS3 properties in Internet Explorer 6 to 8:

  • border-radius
  • box-shadow
  • border-image
  • multiple background images
  • linear-gradient as background image

“A dream comes true” you might think. And yes, it’s close to that. I already use it at some areas of www.kleinezeitung.at and apart from a few restrictions it works almost perfect in IE7 and 8. Internet Explorer 6 unfortunately is a thing apart. Principally it also benefits from CSS3 PIE but more often than not it will produce some bugs or inconsistencies. Setting position: relative helps most of the time, but not always. Fortunately there is a user forum where many of your questions are answered.

All you have to do to use CSS3 PIE is to store a little HTC file anywhere on your server and include behavior: url(PIE.htc) at every selector which should be CSS3 enhanced for IE. Most of the properties are supported natively but some need the -pie- prefix. CSS3 PIE even works at huge websites with large CSS files without any noticeable delay. That sets it apart from other scripts which run fine at small personal websites but fail miserably at huge enterprise sites.

A typical CSS3 PIE enhanced selector looks like this:

#myElement {
    background: red;
    padding: 2em;
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
    border-radius: 1em;
    behavior: url(PIE.htc);

In this case border-radius: 1em and behavior: url(PIE.htc) are of interest which enable rounded corners in Internet Explorer 6 to 8. Nothing else is needed.

Although I am a big devotee of graceful degradation and that a browser should only see what it’s capable of there are times when you need a little bit more than that. And I am really glad that CSS3 PIE is here to stand in for such cases.

  • http://www.sarfraznawaz.wordpress.com Sarfraz Ahmed

    True CSS3Pie is good as long as you don’t care about CSS validation. The “behavior” keyword breaks it.

    It is interesting to check out eCSStender though.