19

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?

stephband
  • 2,594
  • 2
  • 23
  • 33
  • 1
    Well, browsers are supposed to completely ignore properties they don't understand or support (see [this section of the spec](http://www.w3.org/TR/css3-syntax/#error-handling)). Pretty interesting discovery though, gets a +1 – BoltClock May 18 '11 at 20:34
  • Yes, I thought so too. So I was delighted by IE's quirkiness for once. I should point out, I've only tested this with an html5 doctype, in standards mode, blah blah... I don't know if other modes would make a difference. The problem is, IE9 behaves correctly. Grrr :) – stephband May 18 '11 at 21:03
  • I realize this is old, but i'm wondering if there's been any progress on reading unsupported CSS properties in other browsers... – Nathan Bubna Jun 14 '13 at 14:47

4 Answers4

5

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.

Spudley
  • 166,037
  • 39
  • 233
  • 307
  • 1
    Thanks. I kind of feared I just got lucky. I already feature detect, so that's not really part of the problem. The real problem is reading the value of an unsupported property. – stephband May 18 '11 at 20:58
5

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

Community
  • 1
  • 1
Anurag
  • 140,337
  • 36
  • 221
  • 257
  • Thanks. Although that doesn't directly answer the question, your explanation of why we have what we have is very useful. +1 – stephband May 20 '11 at 12:41
4

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.

stephband
  • 2,594
  • 2
  • 23
  • 33
1

In IE9 I found getComputedStyle doesn't work reliably for all unsupported properties, while this does:

element.currentStyle.getAttribute('-some-test')
Tobia
  • 17,856
  • 6
  • 74
  • 93