CSS3 is the coolest thing to happen to web design in a long, long time. With all of its incredible new properties,
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 really do love it!
Not everybody loves it, well, not as yet, anyway. They, of course is Internet Explorer and as you will probably, 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.
CSS3 Cross-Browser Compatabilty Tools and Resources
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-image; multiple background images;
linear-gradient as background image.
CSS3 PIE: CSS3 decorations for IE →
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 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 (ie. IE) that don’t yet support them.
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.
eCSStender enables developers to patch CSS support in browsers and experiment with new features. It also enables designers to keep browser-specific hacks out of their CSS files.
CSS3, Please! is a small utility that allows you to edit the document in real-time and create your own personalised cross browser CSS3 rule.
CSS3 Please! The Cross-Browser CSS3 Rule Generator →
ie-css3.js allows Internet Explorer to identify CSS3 pseudo-class selectors and render any style rules defined with them. Simply include the script in your pages and start using these selectors in your style sheets.
IE CSS3 pseudo-class selectors →
IE CSS3 Text-Shadow & Box Shadow jQuery Plugins (jQuery.textshadow.js & jquery.boxshadow.js)
As you will know, CSS3
text-shadow is not supported in Internet Explorer, however it is possible to create an equivialant effect with the IE propertiary CSS Filter Blur. These jQuery plugins makes use of this IE propertiary and allows your web page to have cross browser support for text-shadow and box-shadow.
IE CSS3 Text-Shadow jQuery Plugin →
IE CSS3 Box-Shadow jQuery Plugin →
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.
CSS3 Support in Internet Explorer 6, 7, and 8 (.htc) →
This is a behavior .htc file for Internet Explorer to make the CSS3 property " border-radius " work on all browsers.
curved-corner.htc (Rounded Corner HTML Elements using CSS3) →
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.
Google Chrome Frame for IE (.htc) →
CSS3 Compatabilty Reference & Utilities
When can I use… is a compatibility table for features in HTML5, CSS3, SVG and other up and coming web technologies.
When can I use… →
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.
CSS Compatibility and Internet Explorer →
Interested in checking out the new web platform capabilities of the forthcoming Internet Explorer 9? You can try the Internet Explorer Platform Preview It includes HTML5 & CSS3 demos and speed demos.
Internet Explorer 9 Test Drive – Internet Explorer Platform Preview →
You might also like…
50 Refreshing CSS Tutorials, Techniques and Resources →
50 Awesome New jQuery Plugins →
40 High Quality CSS and XHTML Web Layout Templates →
40 Professional and Detailed Web Layout PSD Templates →
20 Free Web UI Element Kits and Stencils →
25 Completely Free Fonts Perfect for @fontface →
The Complete Web Design Style Series (700 Designs in 14 Categories) →
Liquid, Fluid and Elastic Layout Templates, Tools and Frameworks →