With the release of CSS3, web designers have had the flexibility of really taking their designs to the next level in web browsers. Long gone are those days of being limited to what you can and can’t do when it comes to laying out a beautiful design in HTML. True, we were able to use images or JavaScript for almost anything, but then we ran into the problem of slow loading pages because of too many objects being loaded onto the page. Well, CSS3 takes care of that problem by using CSS instead of images to achieve things like gradients, drop shadows, rotated text and so. The problem with that is Internet Explorer 6-9 still doesn’t support CSS3 that well, and Microsoft does not do updates often because they are focused on developing newer browsers. The solution, CSS3 PIE.
Slice of PIE Anyone?
We have a hero called CSS3 PIE that makes IE support most of the great features CSS3 has to offer without having to use multiple browser hacks! PIE stands for Progressive Internet Explorer and it allows IE to recognize CSS3 properties when it is attached to an element. The way PIE works is very simple. All you have to do is add this line of code to your css element
[sourcecode language=”css”]
behavior: url(/scripts/pie.htc);
[/sourcecode]
Of course there is some other little business that you need to take care of before it is that easy, but that is what I am going to show you now.
Download CSS3 PIE
- First we need to download and install CSS3 PIE to our site directory. To download PIE go to http://css3pie.com and click download, or click download pie here.
- Next we need to unzip the downloaded folder.
- After that, we need to grab the PIE.htc file and place it in our site directory. I place mine in a folder called scripts.
Using CSS3 PIE
Now that you have PIE uploaded on your site, all you have to do is call it when in the CSS3 element you want to use in your stylesheet. Remember that behavior: url thing earlier? Now we will use it. Let’s say you want a CSS3 Rounded Corners on a div. Just write your normal CSS, and then add the behavior: url to it.
[sourcecode language=”css”]
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #ccc;
behavior: url(/scripts/PIE.htc);
[/sourcecode]
And that’s it! Now IE will recognize the CSS3 and the result will be beautiful rounded corners!
NOTE: Path to file is relevant to site root and not style sheet.
Known issues
Gradients – Gradients need to have the following code put before the behavior: url.
[sourcecode language=”css”]
-pie-background: linear-gradient(#CCC, #EEE); /*PIE*/
[/sourcecode]
If you are having problems, you may need to do some adjustments to your CSS. One know issue is that some elements need to have a position: relative and or z-index applied to them. If you are not seeing the rounded corners or other element you are trying to do, just change your css to this:
[sourcecode language=”css”]
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #ccc;
position: relative;
z-index: 0;
behavior: url(/scripts/PIE.htc);
[/sourcecode]
Most of the time, the issue is now fixed. If not, check the path to your PIE.htc file. Another issue that happens is that you may need to add the following in your .htaccess file:
[sourcecode language=”html”]
AddType text/x-component .htc
[/sourcecode]
Now, enjoy your CSS3 in all browsers! Be sure to check out CSS3Pie.com for a full list of supported features and full documentation on using CSS3Pie.
Updated for using with WordPress
I found an article online from Peter Knight showing how to integrate CSS3 PIE dynamically in WordPress. This proved invaluable since CSS3 PIE depends on the .htc url in order to work properly. Since WordPress theme urls can vary, this is a perfect solution to getting the proper setup to use PIE. You can read the full article here.
In short all you have to do is just add the following code in your functions.php file
[sourcecode language=”php”]
//CSS3 PIE Path URL
function css_pie ( $vars )
{
$vars[] = ‘pie’;
return $vars;
}
add_filter( ‘query_vars’ , ‘css_pie’); //WordPress will now interpret the PIE variable in the url
function load_pie()
{
if ( get_query_var( ‘pie’ ) == "true" ) {
header( ‘Content-type: text/x-component’ );
wp_redirect( get_bloginfo(‘template_url’).’/scripts/pie/PIE.htc’ ); // adjust the url to where PIE.htc is located, in this example we are fetching in the themes includes directory
// Stop WordPress entirely since we just want PIE.htc
exit;
}
}
add_action( ‘template_redirect’, ‘load_pie’ );
[/sourcecode]
Next, all you do is instead of using the the following to call PIE
[sourcecode language=”css”]
behavior: url(/scripts/PIE.htc);
[/sourcecode]
You will use this to call PIE
[sourcecode language=”css”]
behavior: url(/?pie=true);
[/sourcecode]
