How to read a browser's unsupported CSS properties?

Question

Quite by accident today, I discovered that in IE6, IE7 and IE8 it is possible to read unsupported CSS properties using the .css() method of jQuery:

jQuery(node).css('transition');   // Returns the transition value 

This allowed me to add an animation fallback for CSS3 transitions to these browsers in my jQuery plugin jquery.transitions (github.com/stephband/jquery.transitions). Joy.

The question is: is it possible to read unsupported CSS properties in other browsers? My initial tests using the above method in FF3.6 and IE9 were fruitless. Is there another way, short of parsing the stylesheets?

Answer 1

I'm not sure that this technique is going to work too well in most browsers -- as @BoltClock says, it's not something the browser should be doing, so it looks like you just got lucky with IE.

If I wanted to provide feature fallbacks like this, I'd use Modernizr to detect which features were missing.

Answer 2

The DOM Level 2 Style spec from 2000 something had a provision for programmatically accessing rules that a user-agent did not understand. I wrote an answer going over the old spec and one of the comments references a bug filed with Mozilla to implement it.

However, none of the browser vendors implemented this feature. So, in the latest spec, w3 removed this feature altogether. You can find the discussion thread requesting to re-implement this feature in the spec, but that was in 2009, and it's 2011 now, and w3 doesn't seem interested in adding it back.

So technically IE was conforming to the spec until a new one came along :)

Answer 3

For IE9:

After some testing, I made a further discovery.

Although 'transition' is not a supported property in IE9, it DOES show up in document.stylesheets[n].cssRules[n].cssText, unlike in other browsers, and ultimately shows up as getComputedStyle(node).transition. This means reading it is easy. Double joy!

Interestingly, and probably uselessly, all the prefixed rules show up as well - so you can read -moz- and -webkit- prefixed rules in your JavaScript.

For FF3.6 / WebKit

No such tricks for FF3.6 or below, or WebKit, although I'm not too worried. I reckon the takeup of FF4 will be pretty speedy.