2009/02/28

測試各種瀏覽器對於 CSS3 Selectors 選擇器的相容性

測試網址:http://www.css3.info/selectors-test/test.html

共 578 項測試套用於 43 個選擇器(不包括 :hover、:active、:focus、:selection)

* E .class #id
E F E > F E + F E[attribute]
E[attribute=value] E[attribute~=value] E[attribute|=value] :first-child
:link :visited :lang() :before
::before :after ::after :first-letter
::first-letter :first-line ::first-line E[attribute^=value]
E[attribute$=value] E[attribute*=value] E ~ F :root
:last-child :only-child :nth-child() :nth-last-child()
:first-of-type :last-of-type :only-of-type :nth-of-type()
:nth-last-of-type() :empty :not() :target
:enabled :disabled :checked  


通過全部測試的瀏覽器:
Chromium 2.0.167.0、Chrome 1.0.154.48、Firefox 3.1 Beta 2、Opera 9.63、Safari 4 Public Beta(528.16)。

未通過全部測試的瀏覽器(皆為 IE):

  1. IE8 RC1:僅支援 22 個選擇器
  2. IE7:僅支援 13 個選擇器
  3. IE6:僅支援 10 個選擇器


例如,選擇器 E[attribute=value],這個選擇器屬於 CSS2.1 範疇,目前只有 IE6 不支援。2009年1月 IE6 的市場佔有率為 19.21%,所以如果你要設計網頁考慮給所有瀏覽器的話,就不得不考慮 IE6。當然,素來不鳥 IE 瀏覽器的我,還是會堅持使用 IE 不支援的 CSS。

沒有留言 :

張貼留言