2011-05-18 55 views
19

很意外今天,我发现,在IE6,IE7和IE8也可以使用jQuery的的.css()方法来读取不支持CSS属性:如何阅读浏览器不支持的CSS属性?

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

这让我添加动画的后备CSS3在我的jQuery插件jquery.transitions(github.com/stephband/jquery.transitions)中转换为这些浏览器。喜悦。

问题是:是否有可能在其他浏览器中读取不支持的CSS属性?我在FF3.6和IE9中使用上述方法进行的初始测试毫无结果。有没有另一种方式,解析样式表?

+1

那么,浏览器应该完全忽略他们不理解或支持的属性(请参阅[本规范的这一部分](http://www.w3.org/TR/css3-syntax/#error-handling))。相当有趣的发现虽然,获得+1 – BoltClock 2011-05-18 20:34:51

+0

是的,我也这么认为。所以我很高兴IE的奇特之一。我应该指出,我只用html5文档类型在标准模式下测试过,等等......我不知道其他模式是否会有所作为。问题是,IE9的行为是正确的。Grrr :) – stephband 2011-05-18 21:03:18

+0

我意识到这是旧的,但我想知道是否有读取其他浏览器中不支持的CSS属性有任何进展... – 2013-06-14 14:47:25

回答

4

对于IE9:

经过一些测试后,我做了进一步的发现。

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

有趣的是,也许没用,所有前缀规则都会显示出来 - 所以您可以在JavaScript中阅读-moz-和-webkit-前缀规则。

对于FF3.6/WebKit的

没有这样的技巧FF3.6或以下,或WebKit的,虽然我不是太担心。我认为FF4的收购将非常迅速。

+0

...这就是我们如何避免离线编译CSS和JS来添加一些常量。或者我希望如此。 – 2013-10-01 14:20:40

5

我不确定这种技术在大多数浏览器中工作得如何 - 就像@BoltClock所说的那样,它不是浏览器应该做的事情,所以看起来你只是对IE很幸运。

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

+1

谢谢。我有点担心我很幸运。我已经具有检测功能,所以这不是问题的一部分。真正的问题是读取不受支持的属性的值。 – stephband 2011-05-18 20:58:43

5

2000年的DOM Level 2 Style规范有些规定可以通过编程访问用户代理程序不理解的规则。我写了一个answer来覆盖旧规范,其中一条评论参考了一个提交给Mozilla的bug来实现它。

但是,没有任何浏览器供应商实现此功能。因此,在最新的规范中,w3完全删除了此功能。您可以在规范中找到discussion thread请求重新实现此功能,但那是在2009年,现在是2011年,而且w3似乎没有兴趣将其添加回来。

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

+0

谢谢。虽然这并不能直接回答这个问题,但你为什么拥有我们所拥有的解释是非常有用的。 +1 – stephband 2011-05-20 12:41:01

0

在IE9中,我发现getComputedStyle并不适用于所有不支持的属性可靠地工作,而这样做:

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