CSS3Pie for IE

Over the past few years, browsers such as Google’s Chrome, Apple’s Safari and Mozilla’s Firefox have steadily eaten away at the market share once enjoyed by Internet Explorer. Although there’s never been so much choice, one thing designers still find themselves dealing with is this: a lot of people still use Internet Explorer 6 and 7.

When it comes to using technologies such as CSS3 and HTML5, we have to consider whether to wait until Internet Explorer catches up or create alternative experiences for our IE users altogether.

At the time of writing, CSS3 is supported by all major browsers, with Microsoft introducing support in the new IE9 beta, released in September.

But although this monumental release will finally give Internet Explorer users access to HTML5 and CSS3, older versions of the browser will remain incompatible with these technologies. Up until now, developers wishing to use CSS3 with IE have had to create graphic and alternative CSS fallbacks for the browser.

Nifty tool

Here, I’d like to introduce you to a nifty new tool that can provide you with cross-browser CSS3 compatibility easily – it’s called CSS3Pie.

CSS3Pie is a new library written by Jason Johnston, and it stands for CSS3 Progressive Internet Explorer. It provides backwards-compatibility for CSS3 with versions of Microsoft’s browser going all the way back to Internet Explorer 6.0, and represents an easy fix where web designers wish to create modern web designs without needing to worry about how browsers without CSS3 support may look.

CSS3Pie works by creating DHTML behaviours that browsers such as IE are able to understand. It can then control how they’re presented in order to simulate CSS3 effects, which the browser may not display natively. This enables developers to easily translate CSS3 features such as gradient backgrounds, shadows and even rounded corners. The features currently supported are:

-- border-radius

-- box-shadow

-- border-image

-- multiple background images

-- linear-gradient as background images

This enables designers to create one set of CSS3 definitions for elements (such as call-to-action buttons) without having to wonder whether or not it’ll look as good for users using older browsers. CSS3Pie will allow ‘modern’ browsers to natively render the CSS3 definitions, but it will handle versions of IE that don’t quite know how to interpret the newer features.

If you’d like to learn how to use CSS3Pie, consider the following CSS rule for a button class:

.button { background-color:green; padding:5em; -moz-border-radius: 1em; -webkit-border-radius: 1em; border-radius: 1em;}

This creates a button with nicely rounded corners in most browsers, but not IE6-8.0.

.button { ..... behavior: url(PIE.htc); }

Add the above CSS3Pie rule, however, and the same rounded corners now appear on IE! Magic.

If you’re a web designer wishing to begin using CSS3 in your projects today, CSS3Pie will take a lot of the stress out of adding backwards IE compatibility to your layouts. CSS3Pie is in active development and support for other new features such as radial gradients and multiple box shadows are currently being worked on.

To get started with CSS3Pie today, head on over to www.css3pie.com and download the new beta. You can also browse the sources and contribute to the project via GitHub. Enjoy eating pie!