Screencasts

CSS3 in Internet Explorer 6, 7 and 8

Show Notes

With HTML5 and CSS3 on the rise, we’d like to use it more frequently in our projects. Just a few lines of CSS3 can now take the place of background images, sprites, and complex div structures which aren’t semantic. Unfortunately, Microsoft’s Internet Explorer 6, 7 and 8 do not have the new CSS3 standards out-of-the-box, which has prevented some people from adopting the new CSS level 3 rules.

In this screencast we’ll show you how you can start taking advantage of 3 of the new rules, in ALL browsers, including IE 6 through 8.

What you'll learn

You'll learn to use the following CSS level 3 rules in IE6, IE7 and IE8.

  • border-radius
  • box-shadow
  • linear-gradient

Links

Script

With HTML5 and CSS3 on the rise, we’d like to use it more frequently in our projects. Just a few lines of CSS3 can now take the place of background images, sprites, and complex div structures which aren’t semantic.

Dealing with Internet Explorer

Unfortunately, Microsoft’s Internet Explorer 6, 7 and 8 do not have the new CSS3 standards out-of-the-box, which has prevented some people from adopting the new CSS level 3 rules.

In this screencast we’ll show you how you can start taking advantage of 3 of the new rules, in ALL browsers, including IE 6 through 8.

Here is some CSS that makes a menu bar with rounded corners and a background that’s a grey gradient.

...
ul {
    border: 1px solid #757575;
    width:960px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: #666 0px 2px 3px;
    -moz-box-shadow: #666 0px 2px 3px;
    box-shadow: #666 0px 2px 3px;
    background: #E8E8E8;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#E8E8E8), to(#757575));
    background: -moz-linear-gradient(#E8E8E8, #757575);
    background: linear-gradient(#E8E8E8, #757575);
}
...

As you can see - Safari, Chrome and FireFox render it just fine. However, in Internet Explorer 6, 7 and 8, there’s none of the CSS3 goodness.

IE only understands how to apply the background colour from the CSS. We need to include some JavaScript code to add additional functionality for Internet Explorer.

The Solution is PIE

This is called Progressive Enhancement.

Thankfully, Jason Johnston has put together some code called CSS3 PIE, with PIE as an acronym for Progressive Internet Explorer.

The code is contained in an .htc file. An .htc file is Microsoft’s non-standards way for allowing developers to apply new behaviors to HTML elements. When you apply dynamic behaviors to elements in this way, it redefines them as components. HTC is short for HTML Components. Although the mechanics of HTML Components is beyond the scope of this screencast, all you really need to know is that within an .htc file, a “component” is defined by some special proprietary tags and then some JavaScript code for what is to be applied to the given element.

To install CSS3PIE into your project, all you need to do is download the latest version of CSS3PIE from css3pie.com. Unzip the archive and move the PIE.htc file in to your project.

In your CSS, Include an Internet Explorer only behavior rule with the url of PIE.htc. Please note that this url should be from the root of your domain and not relative to the CSS file. If you try to use the relative path, Internet Explorer will fail to apply the desired behavior.

To include linear gradients, we need to include a special -pie-background rule with the gradient we want.

...
ul {
    border: 1px solid #757575;
    width:960px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: #666 0px 2px 3px;
    -moz-box-shadow: #666 0px 2px 3px;
    box-shadow: #666 0px 2px 3px;
    background: #E8E8E8;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#E8E8E8), to(#757575));
    background: -moz-linear-gradient(#E8E8E8, #757575);
    background: linear-gradient(#E8E8E8, #757575);
    -pie-background: linear-gradient(#E8E8E8, #757575);
    behavior: url(/stylesheets/PIE.htc);
}
...

Now that we’ve done that, let’s visit our site again in IE6, 7 and 8 we’ll see our CSS3 is being rendered as we’d like.

CSS3PIE does not cover all of the CSS3 spec. It only covers a few of the new rules including border-radius, box-shadow and linear-gradients. To see what else CSS3PIE is capable of, check out css3pie.com. You’ll also see there’s a nice CSS3 generator there to try it out yourself in your browser.

Thanks for watching! Subscribe to our RSS feed, follow us on Twitter, and please leave any questions, comments or suggestions for new screencasts in the comments below. If you like our videos, please like us on Facebook, and feel free to join the conversation there. See you next time!

← Latest Episodes

blog comments powered by Disqus