HTML/CSS/SVG/JSがどのブラウザに対応しているか素早くチェックできる「caniuse.com」

コーディングしている時に「あれ、このスタイルIE10で使えるんだっけ?」「そろそろベンダープレフィックス(-webkit-など)ってなくても大丈夫かな?」などHTMLやCSSがブラウザに対応しているか確認したいことがあります。その時は「caniuse.com」というサイトがとても便利。

caniuse スクリーンショット

http://caniuse.com/

指定したHTMLやCSS・SVG・JSがどのブラウザに対応しているか、色別にわかりやすく表示します。調べる事ができるブラウザは幅広く、IE・Chrome・Safariはもちろんのこと、Edgeなどの最新ブラウザから、iPhone・Androidのモバイルブラウザまですべてをカバーしています。
試しに「CSS3 3D Transforms」を検索してみました所、最近のブラウザでは問題なく動きそうですが、IEでは全般的に厳しそうだとわかりました。
サイト自体は2014年頃からあったのですが、最近デザインがリニューアルし、レスポンスも速くなりとても使いやすくなりました。

使い方

キーワードで検索する

caniuse 検索
Can I use と書かれた検索ボックスに、調べたいキーワードを入力します。今回は「background-blend-mode」を検索してみましょう。「background-blend-mode」はHTML上でPhotoshopの描画モード「乗算」「オーバーレイ」などが再現できるスタイルです。表現の幅がぐっと広がりそうなスタイルですね。
※右上の「index」というメニューから一覧で検索もできます。

結果が表示される

caniuse 結果画面

キーワードを入力すると、即結果が表示されます。このレスポンスの速さが使いやすいんですよね。そして、各ブラウザが列ごとに表示され、どのバージョンから対応しているか色で表されています。色の見方は下記のようになっています。

Supported ブラウザが対応しています。
Partial Support 制限付きでブラウザが対応しています。(ベンダープレフィクスが必要だったり、代用できるタグが用意されていたりします。)
詳細は、グラフのすぐ下にあるNoteに書かれています。
Not Supported ブラウザが対応していません。
Support unknown 情報無し、対応できているか不明。

今回の「background-blend-mode」はIE,Edgeでは非対応。Firefox,Chromeは対応。モバイルは最近になってやっと対応してきたことがわかります。まだウェブサイトで使うのは難しそうですが、特定ブラウザを動作対象としたアプリなら使えそうです。

過去のブラウザの対応情報をみる

caniuse すべて表示画面
グラフでは、直近のブラウザの対応状況だけは表示さてていますが、少し上の「Show all」という白いボタンをクリックすると、すべてのバージョンの対応状況が確認できます。さっきは対応していると思っていたFirefoxも、実はバージョン30からの対応だったんですね。

利用率で見る

caniuse 利用率画面
「Usage relative」をクリックするとブラウザシェア率に比例したグラフになります。「background-blend-mode」は利用者の多いChromeが対応しているので、意外と多くのブラウザをカバーしていることがわかります。

比較対象のブラウザなどを変更する

caniuse 設定画面
検索覧の右にある「Setting」を押すと、比較するブラウザを選んだり、ブラウザシェア率の統計情報を日本のものにしたりできます。また自分のGoogleAnalyticsのデータと連携することで、実際のデータで比較することもできます。

このサイトを使えば、新しいCSSも導入しやすいですね。サイトを眺めているだけで、知らないHTML/CSSとかが見つかって楽しいです。

中・上級者向けオススメのコーディングの本

2015年に発売された、コーディングの最先端の情報が書いてある本。
HTML5/CSS3はもちろんのこと、Gitを使った制作フロー、Grunt・gulpによる自動化など最新のデプロイ方法も書いてあります。

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

経営者と経営者の妻が沖縄で楽しく生きるためのアレコレ デザイン・カメラ・ロードバイク・旅・畑

© 2017 やまぐち家の生態