CSS3 Transition Polyfill

Question

Alright, so most of you will be familiar with CSS3 Transitions, I prefer it above jQuery animations as it has the simplicity of CSS. My only regret is that it doesn't work in IE < 9( As always ) as well as Firefox < 4, Safari < 4, etc. I do not mean writing separate animations in JavaScript just for IE. But I want a solution that will scan the CSS, grab the speed of the animations, which properties have to be animated, and animate them ( using jQuery, or something else ), is there such a solution if so what is it and where can I obtain it ?

Solution 1

It is possible to detect supported CSS properties, provided you're aware in advance of what browser vendor prefixes you need to sniff for. I've written a gist for the mechanism:

https://gist.github.com/1096784

cssSandpaper is a JS library that aims to parse CSS and dynamically implement polyfills for various CSS3 effects:

http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/

There is also a jQuery library that operates in reverse order, and silently implements transitions where possible when you call $.animate():

https://github.com/louisremi/jquery.transition.js

Solution 2

Sadly, most browsers drop any unsupported CSS declarations when they are rendering pages, meaning that if a browser doesn't support a given CSS feature, you won't be able to look at an element's style property and see that feature's stylesheet entry, even if it was in your CSS file.

IE is the exception to this, which is why polyfills like CSS3Pie are able to work, but I don't believe any other browser gives you any visibility of CSS declarations which they've dropped, so a Javascript solution would also need to re-load the CSS file itself as plain text, and re-parse it, before it even began to actually implement the feature itself.

The implications of this are that what you're asking for would probably be too heavy on the browser to be worth the effort (particularly since we're talking about older versions, which are slower anyway).

This question on SO was asking pretty much the same thing, over a year ago. There wasn't an answer then, and I don't think there is still.

There was a JQuery plugin mentioned in an answer, though, which does what you want, but in reverse (ie you need to run it as a script in all browsers, but it uses the CSS feature within the script, if it's available). That's the closest you're going to get, I think.