Home > CSS Selectors test-suite テスト結果およびダイナミック擬似クラス対応状況一覧 (2009-03-09 現在 )

CSS Selectors test-suite テスト結果およびダイナミック擬似クラス対応状況一覧 (2009-03-09 現在 )

  • Last Modified: 2009年3月18日 16:34

実践 Web Standards Design ( 技術評論社版 )

このページは、株式会社技術評論社より刊行されている実践 Web Standards Design の P.428-P.431 に掲載している、各ブラウザの CSS のセレクタへの対応状況をまとめた表の IE 8 RC1 対応版です。

この表は 2009 年 3 月 9 日現在で入手可能なブラウザを用いて調査しています。 そのため、今後新たなバージョンが登場することにより、この表の内容は正確でなくなる可能性があります。

各ブラウザの CSS のセレクタへの対応状況

CSS Selectors test-suite による各ブラウザの検証結果の一覧表
仕様レベル セレクタの形式 参照ページ Fx3 Fx2 Fx1 IE8 RC1 IE7 IE6 O9 O8 S3 S2 S1 GC NN8 NN7 M
仕様レベル セレクタの形式 参照ページ Fx3 Fx2 Fx1 IE8 RC1 IE7 IE6 O9 O8 S3 S2 S1 GC NN8 NN7 M
CSS 2.1 * 91 ページ参照 - -
CSS1 E 92 ページ参照 - -
CSS1 .class 97 ページ参照 1/6 - -
CSS1 #id 97 ページ参照 - -
CSS1 E F 93 ページ参照 - -
CSS 2.1 E > F 94 ページ参照 2/3 - -
CSS 2.1 E + F 95 ページ参照 1/3 - -
CSS 2.1 E[attribute] 96 ページ参照 2/7 2/7 4/7 - -
CSS 2.1 E[attribute=value] 96 ページ参照 2/17 2/17 7/17 3/17 3/17 - 2/17 2/17 -
CSS 2.1 E[attribute~=value] 96 ページ参照 2/17 2/17 1/17 9/17 3/17 - 2/17 2/17 -
CSS 2.1 E[attribute|=value] 96 ページ参照 2/19 2/19 1/19 9/19 3/19 - 2/19 2/19 -
CSS 2.1 :first-child 98 ページ参照 1/7 1/7 1/7 5/7 1/7 1/7 - 1/7 1/7 -
CSS1 :link 99 ページ参照 - -
CSS1 :visited 99 ページ参照 - -
CSS 2.1 :lang() 100 ページ参照 5/11 5/11 1/11 5/11 - -
CSS 2.1 :before 101 ページ参照 1/1 1/1 - 1/1 -
CSS3 ::before 101 ページ参照 1/1 1/1 1/1 - 1/1 -
CSS 2.1 :after 101 ページ参照 1/1 1/1 - 1/1 -
CSS3 ::after 101 ページ参照 1/1 1/1 1/1 - 1/1 -
CSS1 :first-letter 101 ページ参照 - 1/1 -
CSS3 ::first-letter 101 ページ参照 1/1 1/1 - 1/1 -
CSS1 :first-line 100 ページ参照 - 1/1 -
CSS3 ::first-line 100 ページ参照 1/1 1/1 - 1/1 -
CSS3 E[attribute^=value] 422 ページ参照 2/20 2/20 3/20 10/20 10/20 3/20 - 2/20 2/20 -
CSS3 E[attribute$=value] 422 ページ参照 2/20 2/20 3/20 10/20 10/20 3/20 - 2/20 2/20 -
CSS3 E[attribute*=value] 422 ページ参照 2/16 2/16 3/16 10/16 10/16 3/16 - 2/16 3/16 -
CSS3 E ~ F 425 ページ参照 2/3 2/3 2/3 - 2/3 -
CSS3 :root 422 ページ参照 1/1 1/1 1/1 1/1 - -
CSS3 :last-child 423 ページ参照 1/7 1/7 5/7 5/7 5/7 5/7 2/7 - 1/7 1/7 -
CSS3 :only-child 424 ページ参照 1/5 1/5 3/5 3/5 3/5 3/5 2/5 - 3/5 3/5 -
CSS3 :nth-child() 422 ページ参照 47/88 47/88 47/88 47/88 47/88 47/88 47/88 47/88 - 47/88 47/88 -
CSS3 :nth-last-child() 423 ページ参照 47/88 47/88 47/88 47/88 47/88 47/88 47/88 47/88 - 47/88 47/88 -
CSS3 :first-of-type 423 ページ参照 7/10 7/10 7/10 7/10 7/10 7/10 7/10 7/10 - 7/10 7/10 -
CSS3 :last-of-type 423 ページ参照 7/10 7/10 7/10 7/10 7/10 7/10 7/10 7/10 - 7/10 7/10 -
CSS3 :only-of-type 424 ページ参照 3/5 3/5 3/5 3/5 3/5 3/5 3/5 3/5 - 3/5 3/5 -
CSS3 :nth-of-type() 423 ページ参照 47/88 47/88 47/88 47/88 47/88 47/88 47/88 47/88 - 47/88 47/88 -
CSS3 :nth-last-of-type() 423 ページ参照 47/88 47/88 47/88 47/88 47/88 47/88 47/88 47/88 - 47/88 47/88 -
CSS3 :empty 424 ページ参照 1/6 1/6 2/6 2/6 2/6 2/6 4/6 - 2/6 2/6 -
CSS3 :not() 425 ページ参照 2/4 2/4 2/4 2/4 - -
CSS3 :target 424 ページ参照 1/3 1/3 1/3 1/3 - -
CSS3 :enabled 424 ページ参照 1/2 1/2 1/2 1/2 1/2 - 1/2 1/2 -
CSS3 :disabled 424 ページ参照 1/2 1/2 1/2 1/2 1/2 - 1/2 1/2 -
CSS3 :checked 424 ページ参照 2/2 2/2 2/2 1/2 1/2 - -
CSS1 a:hover 99 ページ参照
CSS 2.1 :hover 99 ページ参照 × ×
CSS1 a:active 99 ページ参照
CSS 2.1 :active 99 ページ参照 × × ×
CSS 2.1 a:focus 99 ページ参照 × × ×
CSS 2.1 :focus 99 ページ参照 × ×
  • N/M ...... CSS Selectors test-suite のテストにて、全てはパスしなかったが M 項目中 N 個パス。なお、全項目にパスしていない場合でも、特定の条件のみパスしなかっただけといった場合( buggy )と、セレクタ自体をサポートしていない場合( unsupported )は区別して網掛けしています(薄い網掛けは buggy 、濃い網掛けは unsupported )。※このページ上では、 buggy の背景色を #f56800 、 unsupported の背景色を #920f00 としています。
  • - ...... CSS Selectors test-suite のテストが動作せず。
  • Fx3: Firefox 3 / Fx2: Firefox 2 / Fx1: Firefox 1 / IE8 RC1: Internet Explorer 8 Release Candidate 1 / IE7: Internet Explorer 7 / IE6: Internet Explorer 6 / O9: Opera 9 / O8: Opera 8 / S3: Safari 3 / S2: Safari 2 / S1: Safari 1 / GC: Google Chrome / NN8: Netscape Browser 8 / NN7: Netscape Navigator 7 / M: Internet Explorer for Mac

なお、新旧対照表は次の通りです。

技術評論社版の実践 Web Standards Design P.428-P.431 新旧対照表
ページ 紙面上の記述 最新の記述 備考
P.428, P.430 IE8 Beta2 IE8 RC1  
P.429, P.431 IE8 Beta2 : Internet Explorer 8 Beta2 IE8 RC1 : Internet Explorer 8 Release Candidate 1  
P.430 IE8 Beta2 の列の a:acitve の行 IE8 RC1 の列の a:acitve の行  
P.430 IE8 Beta2 の列の :acitve の行 IE8 RC1 の列の :acitve の行  
P.431 MacIE の列の a:acitve の行 × MacIE の列の a:acitve の行 これはブラウザのバージョンアップではなく、正誤表に含まれていた修正です。
P.430, P.431 ::selection の行 削除 Selectors Level 3 の草案が 2009 年 3 月 10 日に更新され、 ::selection 擬似要素は削除されました。

表が大きいので、各セルに :hover しているときに、行グループ (row groups: いわゆる tr 要素 ) や列グループ (column groups: いわゆる colgroup 要素 ) の背景色を変えたら分かりやすいかなあと思って

table colgroup:hover,
table col:hover,
table tr:hover {
  background: #ffdb47 url(/files/styles/fade.gif) 0 0 repeat;
}

というスタイルを指定してみたのですが、 table tr:hover のセレクタしかスタイルが有効になりませんでした。 colgroup 要素や col 要素に :hover 指定をしても、その列のセルにスタイルが適用されるわけではないようです。 (jQuery を用いれば同様のことを実現できるとの情報もいただきましたが、個人的にはあまりスクリプトに頼りたくないなと思っています。 )

また、 CSS で tbody 要素を一定の高さにして、 overflow: auto でスクロール表示にする tips で取り上げていた手法を試しに適用してみました。 しかしブラウザによっては固定されませんし、仮に固定されたとしても colgroup に背景色を指定した状態で tbody 要素を固定すると、スクロール時に colgroup の背景色がテーブル外に表示されてしまったので、これについては取りやめるかもしれません。が、 colgroup の背景色が大幅にはみ出たので指定を取りやめています。

Comments:0

Comment Form

コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。

Trackbacks:0

TrackBack URL for this entry
http://lh3.jp/files/system/mtos/mt-tb.cgi/182
Listed below are links to weblogs that reference
CSS Selectors test-suite テスト結果およびダイナミック擬似クラス対応状況一覧 (2009-03-09 現在 ) from lh3.jp

Home > CSS Selectors test-suite テスト結果およびダイナミック擬似クラス対応状況一覧 (2009-03-09 現在 )

Tag Cloud
Categories
Archives
Search
Feeds
  • Feed by feedburner.jp

Return to page top