CSS3 Compatibility Tools for Internet Explorer

CSS3 is the coolest thing to happen to web design in a long, long time. With all of its incredible new properties, border-radius, box-shadow, border-image, transform to name just a few, a new dawn has arrived, and opened up a multitude of powerful and exciting options that have refreshed the web design community as a whole. Yes, we do love it!

Not everybody loves it, well, not as yet, anyway. They, of course, is Internet Explorer, and as you will probably know, they are trying to love it, albeit very slowly. Until they are ready, we can either not support IE at all, and just allow our visitors to enjoy the CSS3 experience through Safari, Chrome and Firefox, or you could use some of the tools we have in this article and beat IE into submission and support CSS3.

Sizzle is a completely standalone (no library dependencies) pure-JavaScript CSS selector engine designed to be easily dropped in to a host library. It supports virtually all CSS3 Selectors – this even includes some parts that are infrequently implemented such as escaped selectors (“.foo\\+bar”), Unicode selectors, and results returned in document order.

Transformie

Transformie is a tiny (5kb) jQuery plugin that you can embed into web pages that renders CSS Transforms by mapping the native IE Filter API to the CSS transitions as proposed by Webkit.

3 Pie (download) is a set of CSS “behaviors” that can be attached to any CSS file by way of the behavior element in order to add rendering support to Internet Explorer 6, 7 or 8 for the more popular CSS3 rendering features: border-radius; box-shadow; border-image; multiple background images; linear-gradient as background image.

The cssSandpaper JavaScript library looks at the stylesheets in an HTML document and, where possible, smooths out the browser differences between CSS3 properties like transform, opacity, box-shadow and others. This script is not only useful for developers who want to support CSS3, it is also useful in other browsers which implement their own vendor-specific variants of these properties.

Modernizr is a small and simple JavaScript library that helps you take advantage of emerging web technologies (CSS3, HTML 5) while still maintaining a fine level of control over older browsers that may not yet support these new technologies.
Modernizr uses feature detection to test the current browser against upcoming features like rgba(), border-radius, CSS Transitions and many more. These are currently being implemented across browsers and with Modernizr you can start using them right now, with an easy way to control the fallbacks for browsers (i.e.,. IE) that don’t yet support them.

The YUI Selector Utility brings CSS3 Selector syntax to JavaScript, providing a compact shorthand for collecting, filtering, and testing HTMLElements.
YUI also works well with mobile browsers that are based on A-Grade browser foundations. For example, Nokia's N-series phones, including the N95, use a browser based on Webkit.

css3-mediaqueries.js makes CSS3 Media Queries work in all browsers. It is is a JavaScript library that makes IE 5+, Firefox 1+ and Safari 2 transparently parse, and allow you test and apply CSS3 Media Queries.

CSS3 Support in Internet Explorer 6, 7, and 8 (.htc)

IE-CSS3 is an .htc (HTML component file ) script that provides Internet Explorer support for some new styles available in the upcoming CSS3 standard. This script rebuilds some of the elements in Vector Markup Language (VML), an IE-specific vector drawing language. VML supports things that are missing from IE's CSS implementation like rounded corners and blur effects.

Google Chrome Frame is an open source plug-in that seamlessly brings Google Chrome's open web technologies and speedy JavaScript engine to Internet Explorer.
It will allow you to start using open web technologies – like HTML5 and CSS3 – right away, even technologies that aren't yet supported in Internet Explorer 6, 7, or 8.

FindMeByIP – CSS3 Properties

If your Web site targets browsers that include earlier versions of Internet Explorer, you want to know the level of CSS compliance for those versions. This article provides an at-a-glance look at CSS compliance across recent versions of Internet Explorer, including support in Internet Explorer 8.