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

Posted 2023-05-09

【中文标题】如何读取浏览器不受支持的 CSS 属性？

【英文标题】：How to read a browser's unsupported CSS properties?

【发布时间】：2011-08-28 09:14:15

【问题描述】：

今天很偶然，我发现在 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 中使用上述方法的初步测试没有结果。除了解析样式表，还有其他方法吗？

【问题讨论】：

好吧，浏览器应该完全忽略它们不理解或不支持的属性（参见this section of the spec）。非常有趣的发现，获得 +1

是的，我也这么认为。所以我有一次为 IE 的古怪而高兴。我应该指出，我只在标准模式下使用 html5 doctype 对此进行了测试，等等等等……我不知道其他模式是否会有所作为。问题是，IE9 行为正确。 Grrr :)

我意识到这是旧的，但我想知道在其他浏览器中读取不受支持的 CSS 属性是否有任何进展......

【参考方案1】：

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

如果我想提供这样的功能回退，我会使用Modernizr 来检测缺少哪些功能。

【讨论】：

谢谢。我有点害怕我只是走运了。我已经进行了功能检测，所以这并不是问题的一部分。真正的问题是读取不受支持的属性的值。

【参考方案2】：

2000 年的 DOM Level 2 Style 规范提供了以编程方式访问用户代理不理解的规则的规定。我写了一个 answer 来回顾旧规范，其中一个 cmets 引用了一个提交给 Mozilla 的 bug 来实现它。

但是，没有任何浏览器供应商实现此功能。所以，在最新的规范中，w3 完全移除了这个特性。你可以在规范中找到discussion thread 请求重新实现这个功能，但那是在 2009 年，现在是 2011 年，w3 似乎没有兴趣将其添加回来。

所以技术上 IE 符合规范，直到出现新的规范:)

【讨论】：

谢谢。尽管这并不能直接回答问题，但您对我们为什么拥有我们拥有的东西的解释非常有用。 +1

【参考方案3】：

对于 IE9：

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

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

有趣的是，所有带前缀的规则也都显示出来了——所以你可以在 javascript 中阅读 -moz- 和 -webkit- 前缀规则。

对于 FF3.6 / WebKit

对于 FF3.6 或更低版本，或者 WebKit 没有这样的技巧，虽然我不太担心。我认为FF4的采用速度会非常快。

【讨论】：

... 这就是我们避免离线编译 CSS 和 JS 只是为了添加一些常量的方法。或者我希望如此。

【参考方案4】：

在 IE9 中，我发现 getComputedStyle 对于所有不受支持的属性都不能可靠地工作，而这样做：

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

【讨论】：

赞成，但读者应该知道这是非标准的，只能在 IE 中使用。