Copperseed Creative


20

December

2011

Standard

Using CSS3PIE in WordPress

Posted in: CSS, CSS3, Quick Tips, Theme Development, Web Design, WordPress

Using CSS3PIE in WordPress

If you’re a web developer you probably already know the issues we have with IE (Internet Explorer) and the problem solving required to get modern websites to be laid out correctly. If you’re not a developer, you can (and should) either update your Internet Explorer to the only version that is standards compliant (Internet Explorer 9) or get another great, free alternative in Google Chrome, Firefox or Safari.

Along with layout issues, all IE versions below 9 are unable to render the newer CSS3 styles which are well-supported in the other browsers mentioned and of course IE 9 itself. Without CSS3 styles, websites can become clunky in using nesting methods to get styling like rounded corners to work, requiring a variety of background images and bloated code, essentially lengthening website load time.

Instead of using these complicated, clunky methods, CSS3 allows the use of the simple border-radius property:

.rounded-box {
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}

This creates a 3px radius on each corner of a div with a class of rounded-box. The -moz- and -webkit- prefixes are specific to Mozilla (Firefox, Seamonkey) and Webkit (Chrome, Safari) browsers respectively. Compare the simplicity and lightness of this method compared to the method here and you’ll see the huge difference and clear advantages of the CSS3 way.

As aforementioned, the big issue with using this method is that it simply doesn’t work in IE 8 and below.

Enter CSS3PIE

The CSS3PIE website explains it as such:

PIE makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features.

These features include the highly useful border-radius, box-shadow and linear gradient properties.

Besides the fact that it is able to replicate these attributes for IE 6-8 it is also really simple to implement. All you have to do is download it, upload it to your hosting server and apply it with a single line into the CSS rule you’re applying it to – behavior: url(path/to/PIE.htc);. Be sure to check out the known issues before moving ahead!

Mmmmm, pie.One of the unknown issues, however, is the difficulty it takes to implement the method in a WordPress theme. The main problem is the way PIE handles the path to the .htc file. While the “behavior” call happens in the CSS, the link we call in that property (if linked relatively) should be relative to the HTML file. An easy way around this would be to use an absolute path to get it working. An example of this would be http://www.example.com/wp-content/themes/mytheme/PIE/PIE.htc.

While that method would work fine, trouble rears its head should you need to migrate the website to a different address or if you are selling themes to multiple users. The absolute path would no longer work. A post on the CSS3PIE forum explains how to get it working in WordPress. See an example of usage below (note that this code needs to be inserted into the functions.php file of your theme):

function my_render_ie_pie() {
echo '
<!--[if IE]>
<style type="text/css" media="screen">
#slider, .rounded-corners a h1, .gradient
{
behavior: url('.trailingslashit(get_bloginfo('template_url')).'scripts/hack/PIE.htc);
}
</style>
 
<![endif]-->
';
}
add_action('wp_head', 'my_render_ie_pie', 8);

This inserts the style code into the head section of all web pages on the site. The only real difficulty here is listing all the CSS selectors that use CSS3 properties which need to render correctly in IE 6-8. The final step would be to insert the correct path to your PIE.htc file in the behavior attribute.

At this stage, your CSS3 styles should be rendering in IE 6-8. However, I have found that it fails to work in some cases and there is a very easy fix to get it going. Very simply change the permissions of the containing folder and PIE.htc file on your hosting server to 777. And there you have it. CSS3 styles working on your WordPress site in IE 6-8.

  • azhari1991

    Hi, it’s work like a charm. But I have one issue.
    It’s doesn’t work for multiple background.
    Let say I styling the body background like this:
    body{ background:url(images/backgroundtop.png) center top no-repeat, url(images/background2.jpg) center top no-repeat fixed; padding:0;margin:0; background-color:#433222; color:#fff!important; font-family:Trebuchet MS; font-size:14px;}