「Can I use」で HTML5 や CSS3 の各機能について対応ブラウザを調べよう ｜ SiTest (サイテスト) ブログ

こんにちは、プロダクト開発チーム エンジニアの森永です。

最近は本ブログでも紹介した Flexbox や CSS Grid Layout のような新しい機能など、サイト作成やアプリ開発などWebを取り巻く HTML5 や CSS3 などの状況は日々変わりつつあります。

しかしながら、ブラウザによっては対応していない HTML5 や CSS3 の機能もいろいろあり、一部のブラウザで見えない、動作しないといった現象も多々あるのが現状です。特に最近では PC用ブラウザでは Internet Explorer 、スマートフォン用ブラウザでは Safari でこのようなケースに遭遇することが多いです。

今までにないサイトやアプリを制作する際、作成中に問題が発生した際などに、欲しい機能がどのブラウザで対応しているかを調べたいということも多いかと思います。ブラウザでの対応状況についての情報を調べることのできるサイト、Webサービスは多数ありますが、今回はその中でもメジャーなものの一つである「Can I use」をご紹介いたします。

「Can I use」のトップページにアクセスすると、画面上部に大きく「Can I Use ________ ?」と表示されています。

この「 ________ 」の部分がテキスト入力可能となっていますので調べたいキーワード( HTML5 の要素や CSS3 のプロパティなど)を入力すると、検索でヒットした HTML、CSS、JavaScript などの項目と、それぞれどのブラウザに対応しているかが一覧表示されます。例えば「grid」と入力すると1番目に「CSS Grid Layout」の対応一覧が表示されます。

対応しているブラウザは緑、対応していないブラウザは赤、一部対応などの条件があるものは黄緑で表示されます(ページ最下部のフッター右下「Eneable accessible colors」をクリックすることによりアクセシビリティを考慮した配色に変更することも可能です)。

CSS Grid Layout の場合、Internet Explorer 11 と Edge は制約あり、Opera Mini が非対応、他のブラウザは現在リリースされているバージョンでは対応されていることがわかります。

それぞれのブラウザのバージョン番号の欄にマウスカーソルを移動させると、対応状況の詳細、および参照しているバージョンのリリース年月日とシェアがポップアップで表示されます。例えば、上記の CSS Grid Layout の一覧で Internet Explorer の「11」のところにマウスカーソルを移動させると、ベンダープレフィックス「-ms-」が必要である点、古い機能のみに対応している点、リリースが2013年10月17日である旨などが表示されます。

対応状況一覧の下部エリアでは注意事項、現時点での不具合、参考リンクなどを確認できます。

このように「Can I use」を使ってブラウザの対応状況を簡単に調べることができます。

もちろん「Can I use」以外でもブラウザの対応状況を調べられるサイトは数多くあります。

私の場合「Can I use」と同じくらいの頻度で　MDN　( MOZILLA DEVELOPER NETWORK )を参照しています。Web技術に関するドキュメントが揃っている MDN は HTML、CSS、JavaScript の各機能のドキュメントとして参照することが多いですが、各機能の説明ページの下部に対応状況の一覧が掲載されています。

※上記画像は CSS プロパティ grid の説明ページ内の対応状況一覧です。

HTML5 や CSS3 などのブラウザ対応状況を調べて把握することは業務を進めていく上で非常に重要です。

サイト作成、アプリ開発の業務を円滑に進めていくために「Can I use」などのサービスをうまく使いこなしましょう！