2011-05-18 57 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')