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

时间:2011-05-18 20:31:43

标签: javascript jquery dom css3 stylesheet

今天很偶然,我发现在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中使用上述方法的初步测试没有结果。还有另一种方法,没有解析样式表吗?

4 个答案:

答案 0 :(得分:5)

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

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

答案 1 :(得分:5)

2000年的DOM Level 2 Style规范提供了以编程方式访问用户代理不理解的规则的规定。我写了一篇answer来讨论旧规范,其中一条评论引用了向Mozilla提交的bug来实现它。

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

所以技术上IE 符合规范,直到新版本出现:)

答案 2 :(得分:4)

对于IE9:

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

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

有趣的是,并且可能毫无用处,所有带前缀的规则也会出现 - 所以你可以在JavaScript中阅读-moz-和-webkit-前缀规则。

对于FF3.6 / WebKit

对于FF3.6或更低版本或WebKit没有这样的技巧,尽管我并不太担心。我认为FF4的采用速度非常快。

答案 3 :(得分:0)

在IE9中,我发现getComputedStyle对所有不受支持的属性都无法可靠地工作,而这样做:

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