CSS3 support in Internet Explorer the easy way

Css3 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

Recommended further reading:

---

Basics of Web Design: HTML5 and CSS3 Basics of Web Design: HTML, XHTML, and CSS is intended for use in a beginning web design or web development course. The text covers the basics that web designers need to develop their skills: Internet and Web concepts overviewCreate web…

---

Stunning CSS3: A project-based guide to the latest in CSS (Voices That Matter) CSS3 adds powerful new functionality to the web’s visual style language to help you create beautiful and engaging designs more easily than ever. With CSS3, you can create eye-catching visual effects such as semitransparent backgrounds, gradients, and drop shadows without…

---

HTML5 and CSS3: Develop with Tomorrow’s Standards Today (Pragmatic Programmers) HTML5 and CSS3 are the future of web development, but you don’t have to wait to start using them. Even though the specification is still in development, many modern browsers and mobile devices already support HTML5 and CSS3. This book…