CSS3 support in Internet Explorer the easy way

Support CSS3 in Internet Explorer 7 and 8Css3 offers a variety of new functionality that makes it easy to produce spectacular graphical effects like rounded corners, box shadow and gradient backgrounds without using external JavaScript or advanced markup with creative usage of background images.

The problem with CSS3 is that especially Internet Explorer 7 and 8 doesn’t support CSS3, which means that you risk that a huge part of your visitors can’t see all the nice eye candy you have built in CSS3.

The good news is that you don’t have to wait for Internet Explorer 9, before CSS3 can be used on your site. With the technique described in this post, you can actually learn Internet Explorer 7 and 8 to render beautiful CSS3

Attached browser behavior

The magic behind this post is called attached browser behavior. The basic principle in attached browser behavior is that you include a link to a special file in your CSS, that expands the rendering capabilities of your browser.

Sounds interesting? – try to look at this demo in Internet Explorer 7 or 8 to see how it works:

Demo: Internet Explorer 7 and 8 displaying CSS3

CSS3 PIE

The example is based on CSS3 PIE, a script that enhances IE 7 and 8 to support the following CSS3 features:

  • border-radius
  • box-shadow
  • border-image
  • CSS3 Backgrounds
  • Gradients
  • RGBA Color Values

If these functions are on you CSS3 wish list for Internet Explorer, then CSS3 PIE is the right solution for you.

Getting started

To get started you need to download the  CSS3 PIE files. The file contains several files. Normally you only need to unpack the file “PIE.htc” and upload it to your web server.

Next you’ll write some nice CSS3:


.box {
 border: 2px solid #999;
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 border-radius: 10px;
 padding: 10px;
 margin: 17px 0 0 0;
 font-size: 12px;
 position: relative;
 box-shadow: #666 0px 2px 3px;
 background: #EEFF99;
 background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33));
 background: -moz-linear-gradient(#EEFF99, #66EE33);
 background: linear-gradient(#EEFF99, #66EE33);
 }

This CSS3 code won’t render with all the effects in IE 7 and 8, but if you adds a link to the PIE.htc file, then suddenly Internet Explorer is capable of displaying nice CSS3 graphics.

behavior: url(PIE.htc);

Please notice that the link to “PIE.htc” should be relative to the HTML file being viewed, not the CSS file it is called from.

This means that the following code can be used for displaying nice CSS3 effects in Internet Explorer:


.iebox {
 border: 2px solid #999;
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 border-radius: 10px;
 padding: 10px;
 margin: 17px 0 0 0;
 font-size: 12px;
 box-shadow: #666 0px 2px 3px;
 background: #EEFF99;
 background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33));
 background: -moz-linear-gradient(#EEFF99, #66EE33);
 background: linear-gradient(#EEFF99, #66EE33);
 behavior: url(PIE.htc);
 -pie-background: linear-gradient(#EEFF99, #66EE33);
 }

Next Steps

CSS3 PIE comes with a lot of features that can enhance the integration on your site. If you’re adding CSS3 features to a lot of CSS3 elements, this can potentially slow down the rendering of your page, however CSS3 PIE supports Lazy initialization, which means that CSS3 PIE effects only will be applied to objects in the visible part of the page which can optimize page rendering time.

Conclusion

If you’re site is having a big amount of Internet Explorer 7 and 8 users, then CSS3 PIE might be a interesting alternative for you if you want to add CSS3 features to your layout.

It’s pretty easy to install, and works pretty good. There are some limitations which can be found here, and if you run into trouble, there is a good forum with many active users

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS
fold-left fold-right
About the author
Jørgen Nicolaisen has been passionately interested in everything online since 1995. His experience is based on working with small hobby projects as well as high volume websites. Jørgen is currently focused on the PHP based programming framework - Codeigniter, and WordPress naturally

Trackbacks for this post

  1. Tweets that mention CSS3 support in Internet Explorer the easy way | Tips4PHP -- Topsy.com

Comments are now closed for this article.