CSS3 for Internet Explorer 6, 7, 8… TODAY!

We all know the feeling. You’ve just put the finishing touches to developing a website and it looks amazing, you’ve even added some cheeky CSS3 features in the stylesheet too, only to find that all your hard work has been stripped out by your old foe, Internet Explorer.

All those clean looking border-radius properties you added. Gone. Multiple backgrounds? Gone. And that lovely box-shadow? Yep, gone!

However, help is at hand, and I’ve been really surprised as to how few developers (mostly overseas) haven’t heard of CSS3PIE yet. I constantly find myself recommending this awesome little .htc file to fellow Twitter users when I see tweets containing, “Well, I got CSS3 gradients to work in IE, but not border-radius” or “Having to use an image for a button because Explorer doesn’t support those beautiful CSS3 buttons just makes me upset.”

CSS3PIE works with the ‘behavior’ property and displays CSS3 styles properly in Internet Explorer. We can safely say that IE 6, 7 and 8 will never support CSS3 so I personally think this is a great way to move forward and all but forget about these terrible browsers!

To implement ‘PIE, I have been calling a IE conditional stylesheet in the head of my documents. Although you can pop it in your regular stylesheet, I would advise against it.

1. Upload the .htc file to your root directory.
2. Find the CSS3 properties you want displayed correctly in IE
3. Add them to your ie.css file (or whatever you want to call it)
4. Done!

Take your element from your regular stylesheet:

#news-box{
width:300px;
height:150px;
background: #EEE;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}

Then copy the following in to your IE Stylesheet… voilà!

#news-box {
border-radius:10px;
behavior: url(PIE.htc);
}

http://css3pie.com/

Quoted Tweets from @shawnjohnston and @C0dingF0x