CSS3: Use CSS3 in IE 6-8 with PIE

Tweet

"Marco, the design department has prepared the layout for the new site. Please, now you can start developing it."

That's what I found in my company mailbox, the other day. Interesting enough, the design department is mainly a smart guy who's very skilled using Photoshop and stuff like that. But placing shadows, neat and polished background textures, rounded corners and every other embellishment you can think of, is drammatically easier to do with Photoshop than actually designing it with CSS, ASP and plain HTML.

Upon looking at the drafts, I immediately realized there were troubles ahead. The problem was compatibility...
I know, I know... we've been talking about CSS3 compatibility issues many times, however I believe that we can now start to talk about possible solutions... or not?

... drum roll ... the solution is already out there!


If we want to use all those wonderful CSS3 features, but we want to make IE users to see them (specifically IE users with a version prior to 9), we can actually use CSS3 PIE.
PIE currently has full or partial support for the following CSS3 features:

• border-radius
• box-shadow
• border-image
• multiple background images
• linear-gradient as background image

which is not bad at all. Infact, what I needed for my new web site was border-radius and box-shadow... mainly. Yes, because when you taste the pie, you like it and so you start eating it all, eventually.

I won't explain everything about PIE, because the site is very well done and a wide documentation is available. As usual you have to pay attention to some things (reading the known issues page), but - believe me - PIE is powerful and so much useful - and in the end very easy to use.
There's no need to re-invent the wheel. Go and get PIE and you will not regret.