如何阅读浏览器不支持的CSS属性？

Question

今天很偶然,我发现在IE6,IE7和IE8中,可以使用jQuery的.css()方法读取不支持的CSS属性:

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

这允许我在我的jQuery插件jquery.transitions(github.com/stephband/jquery.transitions)中为这些浏览器添加CSS3过渡的动画回退.喜悦.

问题是:是否可以在其他浏览器中读取不受支持的CSS属性？我在FF3.6和IE9中使用上述方法的初步测试没有结果.有没有其他方法,没有解析样式表？

Answer 1

我不确定这种技术在大多数浏览器中是否会运行得太好 - 正如@BoltClock所说,这不是浏览器应该做的事情,所以看起来你对IE很幸运.

如果我想提供这样的功能回退,我会使用Modernizr来检测哪些功能缺失.

Answer 2

2000年的DOM Level 2 Style规范提供了以编程方式访问用户代理不理解的规则的规定.我写了一个回答旧规范的答案,其中一条评论引用了Mozilla提交的实现它的错误.

但是,没有一个浏览器供应商实现此功能.因此,在最新的规范中,w3完全删除了这个功能.您可以在规范中找到请求重新实现此功能的讨论主题,但那是在2009年,现在是2011年,而W3似乎并不想将其添加回来.

因此从技术上讲IE 是符合规范,直到一个新的来了:)

Answer 3

对于IE9：

经过一番测试，我有了进一步的发现。

尽管“transition”在 IE9 中不是受支持的属性，但与其他浏览器不同，它确实显示在 document.stylesheets[n].cssRules[n].cssText 中，并最终显示为 getCompulatedStyle(node).transition。这意味着阅读它很容易。双倍喜悦！

有趣的是，可能没用的是，所有前缀规则也会显示 - 因此您可以在 JavaScript 中读取 -moz- 和 -webkit- 前缀规则。

适用于 FF3.6 / WebKit

FF3.6 或更低版本或 WebKit 没有这样的技巧，尽管我不太担心。我认为《FF4》的普及速度会相当快。