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

メニューボタン閉じるボタン

「Can I use」で HTML5 や CSS3 の各機能について対応ブラウザを調べよう

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

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

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

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

Can I Use の使い方

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

Can I use トップ画面

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

Can I use 検索結果一例

対応しているブラウザは緑、対応していないブラウザは赤、一部対応などの条件があるものは黄緑で表示されます(ページ最下部のフッター右下「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 以外で対応状況を調べられるサイト

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

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

MDN ブラウザ対応状況説明一例

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

まとめ

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

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

今すぐお気軽に
ご相談ください。

0120-315-465

(平日 10:00~19:00)

今すぐお気軽に
ご相談ください。

0120-315-465

(平日 10:00~19:00)

グラッドキューブは
「ISMS認証」を取得しています。

認証範囲:
インターネットマーケティング支援事業、インターネットASPサービスの提供、コンテンツメディア事業

「ISMS認証」とは、財団法人・日本情報処理開発協会が定めた企業の情報情報セキュリティマネジメントシステムの評価制度です。

いますぐ無料で
お試しください。

トライアル終了後も
無料でご利用いただけます。

お名前【必須】
メールアドレス【必須】
※携帯・フリーアドレスは不可
電話番号【必須】

利用規約』『プライバシーポリシー』に同意する