A good javascript framework which adds CSS3 support to IE6-8 & missing CSS3 in IE9?

Question

I am surprised that the release version of IE9 is missing support for some more basic CSS3 elements like text-shadow and border-image.

What's the most comprehensive JavaScript framework for adding/emulating CSS3 elements to IE6-9 instead of using a bunch of smaller frameworks like ie-css3, CSS3PIE, Modernizr, html5shiv,... etc?

I am sure there's no single framework that does it all but I am looking for the closest.

Answer 1

What? You're suprprised that IE doesn't follow standards? When will people learn...

Try Selectivizr . From the website: "selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8. Simply include the script in your pages and selectivizr will do the rest." I don't know what's the support of IE9 but it should be much easier than IE6 so I guess it should work fine.

You will still need some of those "smaller frameworks" though, because they do what they do just fine, they are small enough, so there's no point in reinventing the wheel just for the sake of having one big framework instead of few smaller ones. It's hard to make a one-size-fits-all framework so that's why you have some diversity, and I think it's a good thing.

But don't expect that you'll just include some library and all of the browsers will get flawless CSS3 support because that's not gonna happen any time soon.

If you want advanced effects that would work consistently across all of the browsers from IE6 then I would recommend using Raphaël . It uses VML on IE and SVG on other browsers. The API is also simpler than CSS, but that is of course a matter of taste. But even if not the API, it's pretty hard to beat the argument that you can have rounded corners and other goodies that look the same on Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+ without using images.

Answer 2

The items in your list each do different things. I don't think it would make sense for one single framework to implement all of these things.

Just include the ones from your list that you actually need.

• You should (obviously) only use html5shiv if you're using HTML5 elements on your page:

   <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> 

• Modernizr has the functionality of html5shiv plus a lot of feature detection:

  Modernizr does not add missing functionality to browsers; instead, it detects native availability of features and offers you a way to maintain a fine level of control over your site regardless of a browser's capabilities.

  Use html5shiv if you just want to style the HTML5 elements in IE. Use Modernizr if you want to do different things depending on if certain features are supported, for example:

   .my_elem { border: 1px inset #666; } .borderimage .my_elem { border: none; border-image: url(fancy-border.png) 5 5 5 5 round; -moz-border-image: url(fancy-border.png) 5 5 5 5 round; -webkit-border-image: url(fancy-border.png) 5 5 5 5 round; } 

• The idea behind CSS3PIE and Modernizr is very different.

  The way CSS3PIE is most commonly utilized is inside CSS:

   #myElement { ... behavior: url(PIE.htc); } 

  Modernizr allows you to use native fancy new functionality while being safe in the knowledge that you can provide whatever custom fallback you desire for browsers that do not support the specific functionality.

  Whereas CSS3PIE tries to perfectly emulate a limited set of CSS3 properties to work in only the older versions of Internet Explorer, with no additional work other than including the behavior property on relevant elements.