CSS3 in IE: Rounded Corners, Gradients, and Pie

The Challenge

Recently, a major client asked that I create a new home page for their multi-million dollar site based on a Photoshop Mockup. The mockup looked great. However, right away I could tell there would be significant technical challenges in implementing the mockup in a satisfactory way.

As with most major sites, supporting various versions of Internet Explorer is a necessary evil. This meant that all the pretty rounded corners, background gradients, box-shadows, text drop-shadows, alpha transparencies, and other CSS3 properties that look great in the mockup and display correctly in most browsers would look terrible in IE6-8.

Now, there are many hacks around this, but they are all hacks. Historically, aesthetic features like these would either be overlooked in IE6-8, or if deemed important enough, put on an image. There was a third, more advanced, workaround where you could have multiple super-small div tags used similarly to pixels to create the illusion of curves and gradients.

The problem with simply leaving out the CSS3 properties in IE6-8 is that it ends up looking terrible (since it was designed to have rounded corners and gradients) and worse yet, different users would have different experiences.

At first glance, just using an image seems like a small prices to pay for a beautiful website. However, these are deceptively expensive, and not just in terms of system resources! If you ever want to change the site, you have to re-commission a graphic designer to edit the image, then get someone who knows HTML to fix all references to the image This takes time and money. On top of that, images spawn extra requests which can bog down the server and slow page load times. Slower page load times have a direct correlation with decreased conversion rates.

The third work-around, utilizing div tags like pixels, though better, also has hidden costs. First off, if the design gets too complex, all those extra div tags can degrade performance on visitors’ older computers. Additionally, this method muddies your DOM, making it non-semantic and trashing the Separation of Concerns in your design.

Challenge accepted. I was tired of compromising, and thus set out to find a better way.

The Solution

Luckily, people smarter than myself have already struggled with this and invented CSS3 Pie! Mmmmm…Pie.

This clean little framework works by leveraging an IE only property, behavior. It works by putting an HTC file in your statics directory (by your JavaScript or CSS files). Then referencing the behavior wherever you reference a CSS3 property, like so:

.rounded-corner {
border-radius: 8px;
behavior: url(/PIE.htc);
}

Using this method, when your page is loaded in IE, it renders the page as IE normally would (without correctly implementing CSS3 properties). Then after the first pass, the behavior gets called. It’s at this point that the various JavaScript methods in the HTC file get invoked, and leverage the IE supported SVG canvas images to re-render the page as it should appear.

This solution keeps your DOM semantic, is consistent with separation of concern principles, and allows you to not have to write any other special code to work around IE’s issues. This is the best solution I’ve found to date.

That being said, not every CSS3 property is perfectly implemented in CSS3 pie, and there are a few known issues. However, I have yet to run into a situation where I could not use semantic markup and styles, with the help of CSS3 Pie, that would not behave acceptably across browsers.

Overall, I am very happy with CSS3 Pie and would encourage others to try it out.

I’m looking forward to hearing your thoughts and experiences with CSS3 Pie too!