ウェブサイト製作において必ず確認するのが「どのブラウザ・バージョンをフォローするか」。意図しない動作やレイアウトの崩れが生じないよう、製作に採用しようとしているHTMLやCSSが、対象のブラウザでサポートされているかどうかを調べる際に便利なサイト「Can I Use...」についてまとめます。

Can I Use...の使い方

1.調べたいプロパティなどを入力

Can I Use...にアクセスし、調べたいプロパティなどを入力。

2.検索結果を確認

該当する結果がある場合は表示されます。表示される検索結果には様々な内容が表示されています。

2-1.対応ブラウザの状況

主要ブラウザの現在のバージョンが黒背景ラインに揃って表示されます。

各ブラウザのサポート(対応)状況はボックスの色で判別するか、カーソルをボックスに乗せると詳細が表示されます。内容は以下の通りです。

部分的に対応している場合などは、「ベンダープレフィックスが必要」とか「Androidブラウザだとバグが確認されている」などの付帯情報も確認できます。下図の場合は「Supported（対応している）」の表示例。

下図の場合は「Partial support（部分的に対応）」の表示例。

2-2.表示レイアウトの変更

画面左上あたりにある「Usage relative」「Data relative」などのボタンで、各ブラウザのバージョンの表示レイアウトを変更できます。

それぞれの使い方は以下の通りです。

Usage relative

各ブラウザのバージョンごとのシェア率を棒グラフで表現したレイアウトになります。各ブラウザのどのバージョンが多く利用されているか、などを把握したい時に使えます。

Data relative

各ブラウザのバージョンごとのリリース日を時間軸で表現したレイアウトになります。例えば2年前くらいだと各ブラウザでどのバージョンがリリースされていたか、などを把握したい時に使えます。

2-3.対応状況の割合

画面右上の％表示されている箇所は、各最新ブラウザの標準対応割合の値です。値の目安は詳しく調べてませんが、全ブラウザ対応を100％とし、対応していないブラウザがあれば減算していく仕様かと。

2-4.注意点、備考、フィードバック等

画面左下の「Notes」「Known Issues」「Resources」「Feedback」は、調べたプロパティ等の備考になります。

例えば、どういったバグがあるとか、どれが非対応だとか。

これに関してはとても重要な場合もあるので、英語が分からない場合は一手間ですが、chromeの「日本語に翻訳」機能で日本語にしてみると幸せになれるかもです。