如何读取浏览器不支持的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中使用上述方法进行测试，但没有成功。除了解析样式表之外，还有别的方法吗？

- stephband

---

浏览器应该完全忽略它们不理解或不支持的属性（请参阅规范的这一部分）。不过，这是一个相当有趣的发现，值得点赞。 - BoltClock

是的，我也这么想。所以IE的古怪之处让我感到高兴。我应该指出，我只在HTML5 doctype下进行了测试，在标准模式下，等等...我不知道其他模式是否会有所不同。问题是，IE9的行为是正确的。Grrr :) - stephband

我知道这是老问题了，但我想知道在其他浏览器中读取不支持的CSS属性是否有任何进展... - Nathan Bubna

Answer 1

我不确定这种技术在大多数浏览器中是否能够很好地工作 - 正如@BoltClock所说，这不是浏览器应该做的事情，所以看起来你只是在IE中得到了幸运。

如果我想要提供像这样的功能回退，我会使用Modernizr来检测缺失的功能。

- Spudley

---

谢谢。我有点担心我只是走运了。我已经进行了特征检测，所以这并不是问题的一部分。真正的问题是读取一个不支持的属性的值。 - stephband

Answer 2

DOM Level 2 Style规范在2000年左右有一个条款，可以编程访问用户代理不理解的规则。我写了一个答案，介绍了旧规范，其中一条评论提到Mozilla提交了一个错误报告来实现它。

然而，没有任何浏览器供应商实现了这个功能。因此，在最新的规范中，w3完全删除了这个功能。您可以找到讨论线程请求重新实现此功能的规范，但那是在2009年，现在已经是2011年了，w3似乎不再有兴趣将其添加回去。

因此，从技术上讲，IE 符合该规范，直到出现新规范为止 :)

- Anurag

---

谢谢。虽然这并没有直接回答问题，但你对我们拥有什么的解释非常有用。+1 - stephband

Answer 3

对于IE9：

经过一些测试，我发现了更多的问题。

虽然'transition'在IE9中不是一个受支持的属性，但它确实出现在document.stylesheets[n].cssRules[n].cssText中，与其他浏览器不同，并最终显示为getComputedStyle(node).transition。这意味着读取它很容易。双倍的喜悦！

有趣的是，所有前缀规则也会显示出来 - 所以你可以在JavaScript中读取-moz-和-webkit-前缀规则。

对于FF3.6 / WebKit

对于FF3.6或以下版本或WebKit，没有这样的技巧，尽管我不太担心。我认为FF4的普及速度将非常快。

- stephband

---

这就是我们避免离线编译 CSS 和 JS 只是为了添加几个常量的方法，希望如此。 - Fábio Santos

Answer 4

在IE9中，我发现getComputedStyle对于所有不支持的属性不能可靠地工作，而这个方法可以：

element.currentStyle.getAttribute('-some-test')

- Tobia

---

赞同，但读者应该注意这是非标准的，并且只在IE中有效。 - Maximillian Laumeister