ブラウザ対応表Can I useの使い方・WEBページに埋め込む方法

Can I useサイトで、CSSプロパティごとのブラウザ対応状況に関する一覧データが確認できます。

現在はほとんどのブラウザでプロパティ対応が完了しているので、あまり気にする必要は無いと思います。

Can I useサイトをWEBサイトに埋め込んだり、自分のサイトに限定したシェア確認もできます。

プロパティ別ブラウザ対応表「Can I use」

皆さんは「Can I use」というサービスをご存じでしょうか。

Can I useは、CSSのプロパティやhtml5要素の各ブラウザの対応状況が確認できるサービスの事です。

このサイトではCSSプロパティの各ブラウザごとの対応状況を一覧表示で示してくれます。

ブラウザ間の違い以外に、ブラウザのバージョン間の違いもわかります。

使いたいCSSプロパティがOKのブラウザ・不可のブラウザがすぐにわかるのですね。

ブラウザの表示差を無くすのが開発者の仕事

WEBサイトを構築する際にネックとなるのが、各ブラウザごとに出るCSSプロパティ対応の「差」でした。

WEBサイトは紙媒体と違って、人によって見え方が違いますからね。

様々なブラウザや端末でユーザーに訪問されるため、WEBの見え方にはその場その場で微妙な違いが出ます。

それをできる限り同じ様に見せる・差を少なくするのが、サイト制作者の仕事と言えるでしょう。

しかし使うCSSプロパティの挙動の一つ一つを、全てのブラウザで表示確認するのは骨が折れます。

そんな時に便利なツールとなったのが「Can I use」サイトです。

ブラウザ側で進むプロパティ対応

今WEBサイトのデザインを構築するCSS仕様は「CSS3」が最新です。

CSS3登場時は非常に多くのプロパティが追加されました、そのほとんどがこれまでのCSSに無かったものばかりです。

表現の幅や質が格段に向上した訳ですが、それはあくまでCSS側のお話であり、実際に表現するのはWEBブラウザ側の役目です。

主要なブラウザと開発会社

この様にCSSのプロパティ仕様を作りだしているところ（W3C）と、ブラウザの会社は別々です。

今はほとんど追いついた状態

以前まではCSS3の新プロパティ対応に時間が掛かり、開発会社ごとにその速度も違いました。

ですので一時期は、使えるブラウザと使えないブラウザの「差」が大きかったのですね。

しかし今は開発が進み、ほとんどのプロパティでブラウザ対応が完了しています。

その意味で以前ほど、Can I useは使われなくなったと言えるかもしれません。

Can I Useの使い方

ボックスにプロパティ名を入れる

サイト上のCan I useの後ろのボックスに、調べたいCSSのプロパティ名を入れましょう。

すると各ブラウザの対応表結果が表示されます。

ブラウザの種類が横方向に、各ブラウザのバージョンが縦方向（下にいく程新しい）に表示されます。

四角のボックス内に書かれているのがブラウザのバージョン名です。

ボックス色の種類

四角ボックスにカーソルを当てる

四角ボックスにカーソルを当てるとポップアップが表示され、以下の様な内容もわかる様になっています。

Usage Relativeボタン

検索結果左上にあるUsage Relativeをクリックすると、全世界における利用量にあわせた対応状況が確認できます。

ベンダープレフィックス

では今だにブラウザ未対応があるプロパティは、使用を控えた方が良いのかというとそうではありません。

そんな時はCSSのベンダープレフィックスがあります。

ベンダープレフィックスを使うと、ブラウザがまだ対応できていないプロパティでも使う事ができます。

ベンダープレフィックス例

通常のプロパティの後に記述された「-」で始まるプロパティが、プレフィックスの設定です。

border-radius: 10px; -webkit-border-radius: 10px;…GoogleChrome・Safari・Edge向け -moz-border-radius: 10px;…Fire Fox向け -ms-border-radius: 10px;…IE・Edge向け

合計4段となっていますが下3つは各ブラウザ向けの記述であり、結果設定プロパティは1つだけです。

これらはCSS側に追記し、ブラウザ未対応の機能をCSS側が補助する事になります。

コード量も増えて煩雑になるデメリットがありますね。

ベンダープレフィックスなしOKのプロパティ

しかし現在、ほとんどのCSS3プロパティをブラウザが対応する様になりました。

今はベンダープレフィックスなしで使えるプロパティが大多数です。

一時期は対応表を見る必要があった以下のプロパティも、今は全ブラウザ対応済みです。

Can I use以外の対応サイト

「Can I use」以外にもブラウザの対応状況を調べられるサイトがあります。

MDN（MOZILLA DEVELOPER NETWORK）などがそうです。

MDNにはWEB技術に関するドキュメントが揃っており、HTML・CSS・JSの各機能のドキュメントが閲覧できます。

それ以外に各機能の説明ページの下部に、対応状況の一覧が掲載されています。

Can I useをWEBサイト（ブログ）に埋め込む

このブラウザ対応表はよくブログなどに直接表示されている事がありますよね。

このようにCan I useの対応表は、外部サイトに埋め込む事ができるのです。

埋め込みには3種類あり、用途や状況によって使い分けする事ができます。

埋め込む手順

「The CanIUse Embed」サイトを開きましょう。

サイト上で表示するプロパティと表示方法などを設定して、生成されたコードをサイトに貼り付けるだけです。

埋め込み設定（3種）から選択

先に埋め込みできるタイプを紹介しておきましょう。

Interactive Embed

スクリプトを利用して常に最新の情報を自動表示するタイプです。

配色も設定可能です。

Live Image

JavaScriptがサポートされていない場所で使用する場合に使います。

データではなく毎日更新されるライブ画像が表示されます。

Static Image

特定期間の機能サポートをキャプチャーで表示する事が目的であり、静止画像になります。

コード生成の手順

Select a Featureから、埋め込みたいCSSプロパティを選択しましょう（たくさんあるので注意！）。

Select Embed Typeで、先述した3つの埋め込みタイプから選択します。

Additional Settingsで、ブラウザのバージョン表示範囲を指定します。

Default Colour Schemeでは、通常版かアクセスビリティー向けかを選びます。

最後に「Generate」ボタンを押しましょう。

生成されたコードが表示されます。下にプレビューも表示されます。

「Interactive Embed」の場合

下記CDNスクリプト（一例）の貼り付けと、表示部分へのコード貼り付けが必要です。

<script src="https://cdn.jsdelivr.net/gh/ireade/caniuse-embed/public/caniuse-embed.min.js"></script>

生成コードを、HTMLの＜head＞～＜/head＞内もしくは＜/body＞の直前に記述します。

スクリプトを埋め込むので、ページスピードに多少影響があるかもしれません。

「Live Image」や「Static Image」の場合

表示させたい場所に、Get the Embed Codeの欄のソースコードを貼ります。

選択するプロパティによってはLive Imageが選択できない場合もあります。

Google Analyticsと連携する

サイト訪問ユーザーの傾向を知る

理想なのはやはり、全ユーザー向けのブラウザ対応をする事でしょう。

しかしまずは「サイトの訪問ユーザーに絞った実態を知る」事が大切ではないでしょうか。

自社サイトでもクライアントサイトでも、訪問ユーザーのブラウザ傾向というのが必ずあります。

まず身近なユーザーのアクセス環境を把握・対応するのがベストではないでしょうか。

Google Analyticsの連携方法

Can I useサイト右上にある「Settings」をクリックします。

オプション設定が表示されますので「Add Google Analytics:」下にある「Open Importer…」をクリックしましょう。

Import statisticsのページで「Google Analtycs」を選択します。

Googleアカウントの選択画面が表示されますので、AnalyticsのGoogleアカウントを選択しましょう。

caniuse.comがAnalyticsのデータにアクセスできる様「許可」ボタンを押しましょう。

すると紐付けられているAnalyticsのプロファイルが表示されます（複数プロファイルがある場合）ので、そこから一つ選択します。

「サイト名」→「すべてのウェブサイトデータ」と進みましょう。

最後に対象期間を選択するかカレンダー設定して「Import data」を押します。

選択した解析データに関するブラウザの割合が表示されます。

検索して結果を確認

トップページに戻り、例えば「Flexbox」でプロパティ検索をしてみましょう。

先ほど選択した「すべてのウェブサイトデータ」にアクセスしたユーザーが、どれくらいの割合でFlexbox対応ブラウザを使っているのかが分かります。

一押し人気コーナー紹介