Can I use...
こんにちは、さち です。
今回は、サイト制作に超便利！
各ブラウザの CSS3, HTML5 などの対応状況を確認できるサイト
「Can I use...」を紹介します。
ブラウザが CSS3, HTML5 に対応しているか調べる
- 「Can I use...」を開くと、CSS, HTML5 の一覧が表示されます。
- 例えば、CSS の「3D Transforms」を選ぶと…
- 各ブラウザの対応状況が分かります。
（緑＝対応済み，黄緑＝部分的に対応，赤＝未対応）
下のタブで「Known issues（既知の問題）」「Resource（情報，デモ等）」も確認できます。
- 右上に黄色のマークが付いているものは
使用の際にベンダープレフィックスが必要なことを表しています。
（下の例だと、Chrome35 以下は「-webkit-transform」と記述する必要がある）
- 対応表には最近のバージョンしか表示されていませんが
「Show all」をクリックすると…
- 旧バージョンのブラウザの対応状況も確認できます。
ちなみに、CSS3, HTML5 は
サイトトップの「Can I use ＿＿＿＿？」から検索もできます。
対応状況とブラウザのシェアを見る
- ページ右上には、対応済み と 部分的に対応 の合計値
つまり、この CSS3, HTML5 を何％の人が見られるかが表示されます。
「日本」の割合も表示されるので参考になりますね。
「unprefixed」は、ベンダープレフィックスを使わない場合の割合です。
- さらに、「Usage relative」をクリックすると…
- 視覚的に各ブラウザのシェアを確認できます。
- 初期設定では、「Global」のシェアが表示されていますが
「Settings」をクリックして…
- 「Source」を「Japan」に変更すると…
- 「日本」のシェアを確認できます。マジ IE 多いっす。
シェアの情報はどこまで信じていいのか分からないので
最終的な CSS3, HTML5 の使用判断は自己責任で！
「Can I use...」は、他にも JS API, SVG などの対応状況を確認できます。
アクセスはこちらからどうぞ。
コメント