Good javascript framework that adds CSS3 support for IE6-8 and is missing CSS3 in IE9?

Question

I am surprised that the version of IE9 does not support some of the simpler CSS3 elements such as text-shadow and border-image.

What is the most complete JavaScript structure for adding / emulating CSS3 elements in IE6-9 instead of using a bunch of smaller frameworks like ie-css3, CSS3PIE, Modernizr, html5shiv, ... etc.

I am sure that there is no single structure that does all this, but I am looking for the closest one.

Answer 1

What? Are you surprised that IE is not up to standard? When people find out ...

Try Selectivizr . On the website: “selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8. Just include the script on your pages and selectivizr will do the rest.” I don't know what IE9 support is, but it should be much simpler than IE6, so I think it should work fine.

You will still need some of these "small frameworks" because they do what they do, they are small enough, so it makes no sense to reinvent the wheel just to have one large structure instead of several smaller ones. It’s hard to make a single approach so that you have a lot of variety, and I think that’s good.

But don't expect that you just turn on some library and all browsers get flawless CSS3 support, because that won't happen any time soon.

If you need advanced effects that will work consistently in all browsers from IE6, I would recommend using Raphaël . It uses VML in IE and SVG in other browsers. The API is also simpler than CSS, but it is, of course, a matter of taste. But even if it’s not an API, it’s rather difficult to refute the argument that you can have rounded corners and other goodies that look the same in Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+ without using an image.

Answer 2

The items on your list do different things. I do not think that for a single structure it would be wise to implement all these things.

Just include the ones you really need from the list.

• You should (obviously) use html5shiv only if you use HTML5 elements in your page:

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

• Modernizr has html5shiv functionality plus many detection features:

  Modernizr does not add missing functionality for browsers; instead, it detects and offers you a way to maintain an excellent level of control over your site, regardless of browser capabilities.

  Use html5shiv if you just want to style HTML5 elements in IE. Use Modernizr if you want to do different things depending on the support of certain functions, 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 of ​​CSS3PIE and Modernizr is very different.

  The CSS3PIE method is most commonly used inside CSS:

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

  Modernizr allows you to use your own new functionality while being safe, knowing that you can provide any custom reserve you want for browsers that do not support certain functions.

  While CSS3PIE is trying to perfectly emulate a limited set of CSS3 properties to work only in older versions of Internet Explorer, without any additional work, except to include the behavior property in the corresponding elements.