Go my way

FirefoxはCSS3のセレクタを一部先行実装しています。今回は、Firefox 2.0とFirefox 3.0 Alpha 1で検証してみました。

Firefox 2.0はGecko 1.8.1を採用していますが、Firefox 3.0ではGecko 1.9が採用される予定です。今回はこの2つのブラウザの対応状況をまとめています。

• Firefox 2.0 (Gecko 1.8.1.1)
• Firefox 3.0 Alpha 1 (Gecko 1.9 Alpha 1)

検証には、css3.infoの「CSS Selectors Test」を利用しました。また、今回利用したFirefox 3.0はアルファ版であり、正式版ではありません。正式版では、今回の検証結果と違うかもしれません。

CSS3のセレクタを含めた対応表

丸印が対応しているセレクタ、三角印はバグありと出るものの一応サポートしているセレクタ、罰印は対応していないセレクタです。

Selector	Firefox 2	Firefox 3
*	○	○
E	○	○
E[foo]	○	○
E[foo="bar"]	△	○
E[foo~="bar"]	△	○
E[foo^="bar"]	△	○
E[foo$="bar"]	△	○
E[foo*="bar"]	△	○
E[lang|="en"]	△	○
E:root	○	○
E:nth-child(n)	×	×
E:nth-last-child(n)	×	×
E:nth-of-type(n)	×	×
E:nth-last-of-type(n)	×	×
E:first-child	△	△
E:last-child	△	△
E:first-of-type	×	×
E:last-of-type	×	×
E:only-child	△	△
E:only-of-type	×	×
E:empty	△	△
E:link	○	○
E:visited	○	○
E:active	○	○
E:hover	○	○
E:focus	○	○
E:target	○	○
E:lang(fr)	○	○
E:enabled	○	○
E:disabled	○	○
E:checked	○	○
E::first-line	○	○
E::first-letter	○	○
E::selection	×	×
E::before	○	○
E::after	○	○
E.warning	○	○
E#myid	○	○
E:not(s)	○	○
E F	○	○
E > F	○	○
E + F	○	○
E ~ F	○	○

こうやって見比べてみると、Firefox 3.0のGecko 1.9では改善が見られます。バグありのセレクタも正式版では改善されるかもしれませんね。

ほかのブラウザの対応状況は、WWW WATCHさんの「CSS3 セレクタ チートシート」が参考になると思います。

関連エントリー

• Firefox 3.0 Alpha 1、リリース

Tag

CSS, Firefox, Gecko