CSS3Pie for IE
The IE9 beta might be out, but IE6, 7 and 8 still have trouble rendering CSS3. Allow Addy Osmani to introduce you to CSS3Pie
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:
Get top Black Friday deals sent straight to your inbox: Sign up now!
We curate the best offers on creative kit and give our expert recommendations to save you time this Black Friday. Upgrade your setup for less with Creative Bloq.
-- 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!
Thank you for reading 5 articles this month* Join now for unlimited access
Enjoy your first month for just £1 / $1 / €1
*Read 5 free articles per month without a subscription
Join now for unlimited access
Try first month for just £1 / $1 / €1
The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of eight full-time members of staff: Editor Georgia Coggan, Deputy Editor Rosie Hilder, Ecommerce Editor Beren Neale, Senior News Editor Daniel Piper, Editor, Digital Art and 3D Ian Dean, Tech Reviews Editor Erlingur Einarsson and Ecommerce Writer Beth Nicholls and Staff Writer Natalie Fear, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.