Render CSS3 Properties in IE using CSS3 PIE

Every one has a main problem while using CSS3 properties and the problem is Internet Explorer 8 and lower version won’t support it and many users still uses Internet Explorer 8. Not only 8 they many of them also uses 6,7 as well as 9. Here in this post, i’ll introduce a great framework which will allow few CSS3 properties to work in Internet Exploer 6 and higher versions.

I’m going to introduce a framework which is called as CSS3PIE. It’s an opensource framework and used by my designers and developers to develop their websites.

It’s very easy to learn it, not like Jquery or MooTools. Let’s start learning it.

First you’ll need the framework, and as i said the framework is opensource (Free). So you can download it and use it.

You can download it from here : http://css3pie.com/download.

If you are using IE while browsing CSS3PIE official website, then have you checked the shadow and rounded corners effects which they have used to design their own website. That’s what CSS3PIE framework do!.

Ok, i’ll show two examples of using CSS3PIE framework. In the first example we will be creating a ‘div’ with shadow and we will use CSS3PIE to make the shadow work in IE.
And in the second one we are going to add rounded corners in our pre maded div.

The first thing to note is a property of CSS. This property will include CSS3PIE framework to our project. The property is : behavior: url(PIE.htc);

What many developers while including this framework is they include it in every style. For example :

#box {
   behavior: url(PIE.htc);
   /*Then further styling properties.*/
   }

#box {

behavior: url(PIE.htc);

/*Then further styling properties.*/

}

#box {
behavior: url(PIE.htc);
/*Then further styling properties.*/
}

That’s not a way to do it. The appropriate way to do this is to include it while styling the body of your HTML document. Like :
body {
behavior: url(PIE.htc);
/*Then further styling properties.*/
background-color:#000000;
}

Ok, after knowing how to include it, we are ready to use the framework.

To make rounded corners to work in IE you’ll need to use the usual property which is : border-radius:2px;
Also for your information, CSS3PIE team says that you should use -webkit- and -moz- also -o- properties to make the render fast.

For example :
#box {
border-radius:2px;
-webkit-border-radius:2px;
-moz-border-radius:2px;
-o-border-radius:2px;
}

Ok, till now you understand how to include framework and how to make it render fast in Chrome, Safari, Mozilla, Opera. Yes, the framework will also render fast in IE as it’s specially made for IE. Now, let me show you some examples, first will be rounded corners and another one will be shadow.

Border Radius :

#box {
border-radius:2px;
-webkit-border-radius:2px;
-moz-border-radius:2px;
-o-border-radius:2px;
}

Box Shadow :

#box {
box-shadow:0px 0px 20px #2A2A2A;
-webkit-box-shadow:0px 0px 20px #2A2A2A;
-moz-box-shadow:0px 0px 20px #2A2A2A;
-o-box-shadow:0px 0px 20px #2A2A2A;;
}

To learn more about this framework you can check it’s documentation which have many examples. Documentation Link : http://css3pie.com/documentation.

Also Don’t forget to view Ashwin’s Blog!

Render CSS3 Properties in IE using CSS3 PIE

1 thought on “Render CSS3 Properties in IE using CSS3 PIE”

Leave a Comment Cancel Reply