Using JavaScript to Emulate CSS3

This article is an excerpt from Chapter 1 of the book Stunning CSS3: A Project-based Guide to the Latest in CSS, but is kept continually updated. It was last updated in October 2010.

For more updated articles from the book, go to Resources. You can also learn more about the book and download sample chapters.

JavaScript can often be put to work to make non-supporting browsers do the same thing that CSS3 makes more advanced browsers do. For instance, for years now there have been scripts available for creating rounded corners.

In each chapter of this book, we’ll go over appropriate scripts for the technique we’re covering, but here are a few popular scripts that aren’t “uni-taskers”—they each can handle a variety of CSS3 emulation tasks:

IE7, by Dean Edwards
Makes CSS3 pseudo-classes and attribute selectors work in IE 6 through 8. Also makes the CSS3 properties box-sizing and opacity work, along with a bunch of CSS 2.1 properties and selectors that old versions of IE don’t support.
Selectivizr, by Keith Clark
Makes CSS3 pseudo-classes and attribute selectors work in IE 6 through 8. Must be used in conjunction with another JavaScript library.
cssSandpaper, by Zoltan Hawryluk
Makes 2D transforms, box-shadow, gradients, opacity, RGBA, and HSLA work in IE and other non-supporting browsers.
PIE, by Jason Johnston
Makes border-radius, box-shadow, multiple backgrounds, background-origin, background-clip, and linear gradients work in IE 6 through 8. It also enables limited support for border-image and RGBA.