CSS3 Compatibility Tools, Resources and References 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 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

Sizzle JavaScript Selector Library

Sizzle JavaScript Selector Library

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.

Sizzle JavaScript Selector Library →Documentation →

Transformie

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.

Transformie →Documentation →

CSS3 PIE: CSS3 decorations for IE

CSS3 PIE: CSS3 decorations for IE

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.

CSS3 PIE: CSS3 decorations for IE →

cssSandpaper – a CSS3 JavaScript Library

cssSandpaper – a CSS3 JavaScript Library

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.

cssSandpaper – a CSS3 JavaScript Library →

Modernizr

Modernizr

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 (ie. IE) that don’t yet support them.

Modernizr →Documentation →

YUI 2: Selector Utility – Javascript CSS3 Selector

YUI 2: Selector Utility - Javascript CSS3 Selector

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.

YUI 2: Selector Utility – Javascript CSS3 Selector →

eCSStender

eCSStender

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.

eCSStender →Documentation →

52Framework – HTML5 and CSS3 Framework

52Framework - HTML5 and CSS3 Framework

The 52framework provides an easy way to get started using HTML5 and CSS while still supporting all modern browsers (including ie6).

52Framework – HTML5 and CSS3 Framework →Documentation →

CSS3 Please! The Cross-Browser CSS3 Rule Generator

CSS3 Please! The Cross-Browser CSS3 Rule Generator

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 pseudo-class selectors

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 →

css3-mediaqueries-js

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-mediaqueries-js →

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.

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

curved-corner.htc (Rounded Corner HTML Elements using CSS3)

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) →

Google Chrome Frame for IE (.htc)

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.

Google Chrome Frame for IE (.htc) →

CSS3 Compatabilty Reference & Utilities

When can I use…

When can I use...

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… →

Compatibility Master Table

Compatibility Master Table

Compatibility Master Table →

FindMeByIP – CSS3 Properties

FindMeByIP - CSS3 Properties

FindMeByIP – CSS3 Properties →

CSS Compatibility and Internet Explorer

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 →

Internet Explorer 9 Test Drive – Internet Explorer Platform Preview

Internet Explorer 9 Test Drive - Internet Explorer Platform Preview

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 →

Author: (645 Posts)

Paul Andrew is the editor and founder of Speckyboy Design Magazine.

Comments