閲覧ブラウザのCSSセレクタのサポート状況を確認できる「Browser CSS-Selector-Test」

閲覧ブラウザのCSSセレクタのサポート状況を確認できる「Browser CSS-Selector-Test」

手軽に確認できて、今後も使う機会がありそうなので備忘録。「Browser CSS-Selector-Test」は現在閲覧しているブラウザがCSSセレクタをどれくらいサポートしているかを確認できるサイトです。特にCSS4の場合は気にせず使えるようになるのはまだしばらく先だと思いますが、現状で使用できるかをざっくり見たい時に便利だと思います。

Browser CSS-Selector-Test

使い方は確認したいブラウザでサイトにアクセスし、中央にある「Start test!」のボタンを押下するだけでCSS1~CSS4までのサポート状況を確認することができます。

サポート割合の結果

上記はChormeで使用して表示された結果をキャプチャしたもので、ボタンを押下するとこのようなパイチャートでサポート割合が表示され、真ん中が全体的なサポート割合、その他がそれぞれのCSSレベルのサポート割合となっています。
周りの部分は内側からCSS1 → CSS2 → CSS3 → CSS4の順になっていて、それぞれにマウスオンすると割合の数値が表示されます。
また、もっと具体的に見たい場合はページ下部に表示されるリストで確認することができ、緑が対応しているセレクタ、赤が未対応のセレクタになっています。

Back to Top

閲覧ブラウザのCSSセレクタのサポート状況を確認できる「Browser CSS-Selector-Test」

閲覧ブラウザのCSSセレクタのサポート状況を確認できる「Browser CSS-Selector-Test」

/ Services & Resource

Tagged with:

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。