CSS3 Compatibility Tools for Internet Explorer


By

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 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.

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.

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.

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.

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

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.

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.

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

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-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 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.

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.

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.

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.

Compatibility Master Table

Compatibility Master Table

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.

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.

Related Topics


Top
This page may contain affiliate links. At no extra cost to you, we may earn a commission from any purchase via the links on our site. You can read our Disclosure Policy at any time.