Can I useでCSS3とHTML5の対応状況をチェックしよう!

Writer:Asai (20.10.21)

CSS3やHTML5でコーディングをする際、各ブラウザでの対応状況はしっかりと確認する必要があります。特にIEでは対応していないプロパティやタグもあるため、事前に知っておくと非常に安心です。Can I useではそれらの状況を瞬時に把握できるため、非常に便利なWebサイトです。

Can I useの使い方

まずは、Can I useにアクセスします。すると、上部に「Can I use 」という入力ボックスがあります。ここに知りたいCSS3やHTML5のプロパティやタグを入力すればOKです。うん、簡単ですね。

たとえば、「border-radius」で検索してみます。すると、次のような画面が表示されます。

これを見ると、ほとんどのブラウザで対応されていますが、IEでは、6〜8で非対応になっていることがわかります。(今では、ほぼ利用されていないブラウザなので、安心はできますね)

色の説明については、画面右下に説明されていますので、そちらを参照してください。

次に、WebP(ウェッピー)を検索してみます。WebPとは、Googleが開発している新しい画像フォーマットで、表示速度短縮などが期待されています。

これを見るとIEでは対応がされていないことが分かります。つまり、まだまだWebサイトで利用するためには、危険があるということがわかります。

最後に、「CSS3 2D Transforms」で検索してみます。2D Transformsは平面での変形を意味しています。いわゆる回転などが該当します。

これを見ると、ほとんどのブラウザで対応されているため、安心して利用できそうです。しかし、IE9の箇所を見てみると、右上に黄色のアラートが表示されています。こちらにカーソルを持っていくと、ベンダープレフィックスが必要だよという内容であることがわかります。このように、Can I useではベンダープレフィックスが必要かどうかも知ることができます。

最後に

Can I useは様々なプロパティやタグの対応状況を調べるためには、非常に有効なWebサイトです。CSS3やHTML5の登場により、Webサイトのコーディングや実現できることが大幅に拡大しました。また、多くの最新ブラウザではそれらに対応してくれています。一方で、古いバージョンのブラウザでは対応していないことも多々あり、その結果、古いブラウザでの表示不具合が起きることもあります。そのため、クライアントとの話で、「どのブラウザのどのバージョンまで対応範囲とするか」という点はしっかりと決めておく必要があります。

コラム執筆中

アイビーネットでは、ホームページに関するコラムを随時執筆中です。

コラム カテゴリ