SONICMOOV Googleページ

初心者は要チェック!HTML5、CSS3の対応状況を確認できるCan I USEが便利!

初心者は要チェック!HTML5、CSS3の対応状況を確認できるCan I USEが便利!

  • このエントリーをはてなブックマークに追加

HTML5、特にCSS3では、色々と便利なプロパティ機能が追加されていてコーディングがだいぶ楽になった部分もあるかと思いますが、それでもブラウザによっては使えない場合もあるかと思います。

そんな時に役に立つのが、そのプロパティのブラウザ対応状況を簡単にチェックできるサービス「Can I use」です。
https://caniuse.com/

Can I useの使い方

サイトにアクセスすると下記のようなメッセージが表示されますので、「Import」を選びましょう。これは、例えばFlexboxの対応状況の検索結果画面に、日本でのサポート状況もデータとして表示してくれますので、インポートしておくと便利です。

Detected your country as “Japan”. Would you like to import usage data for that country?

can i useの使い方

使い方はいたって簡単で、サーチボックスに調べたいプロパティを入力するだけです。
下記サンプルではFlexboxのIE、Edge、Firefox、Chrome、Safari、Opera、iOS Safari、Opeara Mini、Android Browser、Chrome for Androidの対応状況が表示されています。FlexboxはIE 11が一部をサポート、他のブラウザにおいてはすべて対応している状況となっているのが分かります。

先程のImportを選んでおけば、日本では78.73%がサポート、17.77%が一部をサポート、合わせて96.5%とかなりの割合でサポートされているのが画面右上の情報でも分かるようになっています。

色の分類は下記のようになっています。
色で対応状況を確認

  • Supported = サポート
  • Not supported = 非対応
  • Partial support = 一部をサポート
  • Support unknown = 不明

余談ですが、トップページの「Most searched features」では、もっとも検索されているプロパティの人気は下記の通りとなっていて、Felxboxの人気の度合いが分かります。(記事執筆時点)
個人的にはCalcもかなり便利なプロパティだと思います。

  1. Flexbox
  2. CSS Grid
  3. CSS transforms
  4. SVG
  5. CSS calc()

Analytics連携でさらに便利に

Analyticsと連携すると自分のサイトの訪問者でどれぐらいサポートされているのかを確認することができるっていうTIPSがサイト内にあったので紹介しておきます。

まずは、「Settings」をクリック。
Settingを選択

そうすると様々なオプション設定ができるサイドバーが表示されますので、「From Google Analytics:」の箇所の「Import」をクリックします。
Analyticsからインポート

そしたらこんなウィンドウが表示されます。ポップウィンドウがブロックされている場合は、許可を出しておいてください。 「Access Google Analtycs」を選択します。
Access Google Analytics

するとこんなポップウィンドウが表示されますので、ログインしているGoogleアカウントを選択します。(会社のアカウントを使うのはアレなんで個人アカウント使ってます。)
アカウントを選択

caniuse.comがAnalyticsのデータにアクセスすることを許可します。
アクセス許可を出す

そしたら、アカウントに紐付けられているAnalyticsのプロファイルを選択します。
該当サイトを選択

とりあえずは、過去30日間のデータをインポートしてみます。
Import dataを選択

完了したらトップページに戻って検索をしてみましょう。するとどうでしょう、自分のサイトにアクセスしたユーザーが、どれぐらいFelxbox対応のブラウザを使っているのかが分かります。
自分のサイトのHTML5、CSS3の対応状況が分かる

終わりに

仕事の案件によっては色々とブラウザ対応を求められることがありますが、まずはAnalyticsで現状のユーザーのアクセス環境を把握して対応するのがモダンなコーディングできてコストを抑えることができるのではないでしょうか。

  • このエントリーをはてなブックマークに追加

記事作成者の紹介

マーツ(その他)

ビールが好き。 でも最近はワインと日本酒もいいなぁと思える今日この頃。

フロントエンドエンジニア募集中!

×

SNSでも情報配信中!ぜひご登録ください。

×

SNSでも
情報配信中!
SONICMOOV Facebookページ SONICMOOV Twitter SONICMOOV Googleページ
フロントエンドエンジニア募集中!

新着の記事

mautic is open source marketing automation