記事本文
IE 7 の正式版が出たので CSS Selectors testsuite でチェックしてみた
IE 7 の正式版がリリースされたので、かねてから便利だと思っていた、 Lucky bag::blog: 使用中のブラウザの CSS セレクタ対応状況をチェックできる CSS Selectors testsuite で紹介されていた CSS Selectors testsuite - CSS3 . info でチェックしてみました。
IE 7 だけでなく、それ以外の手持ちのブラウザでの検証結果も併せて掲載しておきます。 それにしても、 Lucky bag::blog: 使用中のブラウザの CSS セレクタ対応状況をチェックできる CSS Selectors testsuite に寄せられたトラックバックから辿れる我的春秋: CSS 3 は Konqueror がアツイ！での Konqueror の対応しまくりっぷりはすごいですねえ。 あと Safari は私の環境では検証できないので、検証結果を誰かよろしくお願いします。
トラックバックで Safari の検証結果をお寄せいただきました ! Safari の検証結果は Blog.okuryu : Safari の CSS セレクタ対応状況でご覧ください。
CSS Selectors testsuite による各ブラウザの検証結果
| IE 6 | IE 7 | Firefox 1.5.0.7 | Opera 9.02 | |
|---|---|---|---|---|
| * | ○ | ○ | ○ | ○ |
| E | ○ | ○ | ○ | ○ |
| .class | (1 out of 6 failed) | ○ | ○ | ○ |
| #id | ○ | ○ | ○ | ○ |
| E F | ○ | ○ | ○ | ○ |
| E > F | (2 out of 3 failed) | ○ | ○ | ○ |
| E + F | (1 out of 3 failed) | ○ | ○ | ○ |
| E[attribute] | (4 out of 7 failed) | (2 out of 7 failed) | ○ | ○ |
| E[attribute=value] | (7 out of 17 failed) | ○ | (2 out of 17 failed) | (3 out of 17 failed) |
| E[attribute~=value] | (9 out of 17 failed) | (1 out of 17 failed) | (2 out of 17 failed) | ○ |
| E[attribute|=value] | (9 out of 19 failed) | (1 out of 19 failed) | (2 out of 19 failed) | ○ |
| :first-child | (5 out of 7 failed) | (1 out of 7 failed) | (1 out of 7 failed) | (1 out of 7 failed) |
| :link | ○ | ○ | ○ | ○ |
| :visited | ○ | ○ | ○ | ○ |
| :lang() | (5 out of 11 failed) | (5 out of 11 failed) | ○ | (1 out of 11 failed) |
| :before | (1 out of 1 failed) | (1 out of 1 failed) | ○ | ○ |
| ::before | (1 out of 1 failed) | (1 out of 1 failed) | ○ | ○ |
| :after | (1 out of 1 failed) | (1 out of 1 failed) | ○ | ○ |
| ::after | (1 out of 1 failed) | (1 out of 1 failed) | ○ | ○ |
| :first-letter | ○ | ○ | ○ | ○ |
| ::first-letter | ○ | (1 out of 1 failed) | ○ | ○ |
| :first-line | ○ | ○ | ○ | ○ |
| ::first-line | ○ | (1 out of 1 failed) | ○ | ○ |
| E[attribute^=value] | (10 out of 20 failed) | (3 out of 20 failed) | (2 out of 20 failed) | (4 out of 20 failed) |
| E[attribute$=value] | (10 out of 20 failed) | (3 out of 20 failed) | (2 out of 20 failed) | (4 out of 20 failed) |
| E[attribute*=value] | (10 out of 20 failed) | (3 out of 16 failed) | (2 out of 16 failed) | ○ |
| E ~ F | (2 out of 20 failed) | ○ | ○ | ○ |
| :root | (1 out of 1 failed) | (1 out of 1 failed) | ○ | (1 out of 1 failed) |
| :last-child | (5 out of 7 failed) | (5 out of 7 failed) | (1 out of 7 failed) | (5 out of 7 failed) |
| :only-child | (3 out of 5 failed) | (3 out of 5 failed) | (1 out of 5 failed) | (3 out of 5 failed) |
| :nth-child() | (47 out of 88 failed) | (47 out of 88 failed) | (47 out of 88 failed) | (47 out of 88 failed) |
| :nth-last-child() | (47 out of 88 failed) | (47 out of 88 failed) | (47 out of 88 failed) | (47 out of 88 failed) |
| :first-of-type | (7 out of 10 failed) | (7 out of 10 failed) | (7 out of 10 failed) | (7 out of 10 failed) |
| :last-of-type | (7 out of 10 failed) | (7 out of 10 failed) | (7 out of 10 failed) | (7 out of 10 failed) |
| :only-of-type | (3 out of 5 failed) | (3 out of 5 failed) | (3 out of 5 failed) | (3 out of 5 failed) |
| :nth-of-type() | (47 out of 88 failed) | (47 out of 88 failed) | (47 out of 88 failed) | (47 out of 88 failed) |
| :nth-last-of-type() | (47 out of 88 failed) | (47 out of 88 failed) | (47 out of 88 failed) | (47 out of 88 failed) |
| :empty | (2 out of 6 failed) | (2 out of 6 failed) | (1 out of 6 failed) | (2 out of 6 failed) |
| :not() | (2 out of 4 failed) | (2 out of 4 failed) | ○ | (2 out of 4 failed) |
| :target | (1 out of 3 failed) | (1 out of 3 failed) | ○ | (1 out of 3 failed) |
| :enabled | (1 out of 2 failed) | (1 out of 2 failed) | ○ | ○ |
| :disabled | (1 out of 2 failed) | (1 out of 2 failed) | ○ | ○ |
| :checked | (2 out of 2 failed) | (2 out of 2 failed) | ○ | ○ |
IE 6 に比べて IE 7 は大幅に対応状況が改善されていますが、 ::first-letter と ::first-line だけは後退しているように見えます。 これは IE 6 ではとりあえず : があれば first-letter 擬似要素あるいは first-line 擬似要素として認識していたため ( 極端な話、 :::first-letter や :::first-line と書いても有効になります ) で、かつ我的春秋: IE 7 は ::before, ::after を実装せずにあるように、 :: 方式を正式に対応しないということにしたためのようです。
なお、擬似要素の :: による記法については 擬似要素を記述する際の Tips や Lucky bag::blog: 疑似要素の表記法を参照してください。
トラックバック送信先
- Lucky bag::blog: 使用中のブラウザの CSS セレクタ対応状況をチェックできる CSS Selectors testsuite
-
IE 7 の正式版がリリースされたので、 CSS Selectors testsuite の IE 6 と IE 7 と Firefox 1.5.0.7 と Opera 9.02 での検証結果をまとめてみました。
