疑似要素や疑似クラスなど、使っているブラウザのCSSセレクタ対応状況をチェックできる「Browser CSS-Selector-Test」

疑似要素や疑似クラスなど、使っているブラウザのCSSセレクタ対応状況をチェックできる「Browser CSS-Selector-Test」

疑似要素や疑似クラスなど、使っているブラウザのCSSセレクタ対応状況をチェックできる「Browser CSS-Selector-Test」

Browser CSS-Selector-Testは、使っているブラウザのCSSセレクタに関する対応状況をチェックすることができるWebツールです。

Browser CSS-Selector-Testを使えば、CSS4から追加された疑似要素や疑似クラスなどの対応状況を簡単に調べることができます。

Browser CSS-Selector-Testの使い方

調べたいブラウザでBrowser CSS-Selector-Testにアクセスして、[Start test!]をクリックするだけです。

Start test!

すぐに画面が切り替わって、対応状況が表示されます。

セレクタの対応状況

下の方にスクロールしていくと、詳細な対応状況がリスト表示されます。

CSSセレクタのリスト表示

リストをクリックすると、説明や使用例、対応ブラウザなどを表示してくれます。

CSSセレクタの詳細

あとがき

今だとCSS4の対応状況が気になるところではないでしょうか。Google Chromeの場合、CSS3までは100%対応していますが、CSS4だとまだ32%(2015/11/25時点)しか対応していません。

今後どんどん対応セレクタが増えていくのが楽しみですね。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です