スポンサーリンク

各ブラウザの CSS3, HTML5 の対応状況が分かるサイト

この記事は約2分で読めます。

Can I use...
操作画面

こんにちは、さち です。

今回は、サイト制作に超便利!
各ブラウザの CSS3, HTML5 などの対応状況を確認できるサイト
「Can I use...」を紹介します。

スポンサーリンク

ブラウザが CSS3, HTML5 に対応しているか調べる

  1. 「Can I use...」を開くと、CSS, HTML5 の一覧が表示されます。
    操作画面
  2. 例えば、CSS の「3D Transforms」を選ぶと…
    操作画面
  3. 各ブラウザの対応状況が分かります。
    (緑=対応済み,黄緑=部分的に対応,赤=未対応)
    下のタブで「Known issues(既知の問題)」「Resource(情報,デモ等)」も確認できます。
    操作画面
  4. 右上に黄色のマークが付いているものは
    使用の際にベンダープレフィックスが必要なことを表しています。
    (下の例だと、Chrome35 以下は「-webkit-transform」と記述する必要がある)
    操作画面
  5. 対応表には最近のバージョンしか表示されていませんが
    「Show all」をクリックすると…
    操作画面
  6. 旧バージョンのブラウザの対応状況も確認できます。
    操作画面

ちなみに、CSS3, HTML5 は
サイトトップの「Can I use ____?」から検索もできます。
操作画面

対応状況とブラウザのシェアを見る

  1. ページ右上には、対応済み と 部分的に対応 の合計値
    つまり、この CSS3, HTML5 を何%の人が見られるかが表示されます。
    「日本」の割合も表示されるので参考になりますね。
    「unprefixed」は、ベンダープレフィックスを使わない場合の割合です。
    操作画面
  2. さらに、「Usage relative」をクリックすると…
    操作画面
  3. 視覚的に各ブラウザのシェアを確認できます。
    操作画面
  4. 初期設定では、「Global」のシェアが表示されていますが
    「Settings」をクリックして…
    操作画面
  5. 「Source」を「Japan」に変更すると…
    操作画面
  6. 「日本」のシェアを確認できます。マジ IE 多いっす。
    操作画面

シェアの情報はどこまで信じていいのか分からないので
最終的な CSS3, HTML5 の使用判断は自己責任で!

「Can I use...」は、他にも JS API, SVG などの対応状況を確認できます。
アクセスはこちらからどうぞ。

   → Can I use... Support tables for HTML5, CSS3, etc

コメント

タイトルとURLをコピーしました