Using PIE to deliver CSS3

Image for Using PIE to deliver CSS3
Image for Using PIE to deliver CSS3

CSS3 provides some neat effects, like rounded corners and shadows, but InternetExplorer (before version 9) just ignores these CSS rules.

Is there a way to get Internet Explorer to conform?

Hopefully you are seeing the rounded corners and shadows, even if you are using Internet Explorer, because Jason Johnston has provided a solution and you can find out all about it on his web site: css3pie

furthermore...

I think you are better off going over to css3pie yourself to read how to use, but just briefly then, here is a typical use here inside a CSS file:

video {
-webkit-box-shadow: 0px 0px 22px #4e6b57;
-moz-box-shadow: 0 0px 22px #4e6b57;
-o-box-shadow: 0 0px 22px #4e6b57;
box-shadow: 0 0px 22px #4e6b57;
behavior: url(/scripts/pie/PIE.htc);
}

This achieves a shadow on the video element (don't forget - this is an HTML5 element).

If all was well with the world, and all browsers supported the shadow on the box element, then we would only need:

box-shadow: 0 0px 22px #4e6b57;

But for safety, we add vendor specific extensions such as:

-moz-box-shadow: 0 0px 22px #4e6b57;

For Firefox

Then we add the PIE magic with:

behavior: url(/scripts/pie/PIE.htc);

The file (PIE.htc) needs to be on your server, and the server must be able to recognise this mime type. To resolve this problem on an Apache server, add this to an htaccess file:

AddType text/x-component .htc

Posted on 04 Feb around 11am

Tags:

Commenting is not available in this channel entry.