HTMLとCSSのブラウザ対応状況を確認できる「Can I use…」とは

ホームページのコーディングですが、各ブラウザ、バージョンに対応するのはとても大変です。
私は基本Google Chromeで確認しながらコーディングするのですが、IEで確認するとズレていることなどがあったりします。さらに現在ではスマホでの表示にも重要になっていますので、正常に表示されているか必ず確認する必要があります。

そんなときに、HTMLとCSSのブラウザ対応状況を確認できる「Can I use…」というサイトがありますので、ご紹介したいと思います。

「Can I use…」 の使い方

「Can I use…」にアクセスすると以下のページが表示されます。

使い方は簡単で「Can I use ____________________ ? 」の「 ____________________ 」に調べたい要素を入力するだけです。
例として「calc」を入力してみると以下の結果が表示されました。

ブラウザとそのバージョンの表となっていますが、その色の説明はページの右下に記載されています。

簡単に訳してみると以下のようになります。

「部分的なサポート」の場合は「ベンダープレフィックス」が必要だったりしますので、実際に試してみる必要があります。

まとめ

コーディングする時に今まで使ったことのない技術を使う場合は、一度「Can I use…」で調べてみるのもいいかと思います。

気にはなっているがまだ使ったことがない「WebP image format」で調べてみると以下のような結果になりました。
IEや Safari 、iOS Safariがサポートしていないことがわかります。