これは便利すぎる! Webサイトやスマホアプリのターゲットブラウザを決める時に役立つツール -Browserslist

ターゲットブラウザを決める時に役立つ便利なツールを紹介します。

条件は細かく設定でき、下記は日本のユーザーを対象、シェアが0.2%以上あり、現在サポートされていないブラウザを除いたものです。iOSのSafariが多く、Chrome for Android, Chrome for desktopと続いています。

ターゲットブラウザを決める時に役立つ便利なツール -Browserslist

Browserslist
Browserslist -GitHub

Browserslistの特徴

Browserslistはフロントエンドでよく使用されるツール(Autoprefixer, Babel, ESLint, PostCSSなど)でブラウザのターゲットや互換性を共有するツールです。

0.5%以上シェアがあるブラウザ、最新2バージョンのブラウザ、サポートが終了しているブラウザなどのクエリを使用してブラウザのバージョンリストを生成できます。クエリはCan I useのデータが使用されています。

サイトのキャプチャ

Browserslist

Browserslistの使い方

Browserslistの使い方は簡単、登録など面倒なことは一切不要です。
まずは、サイトにアクセスします。

サイトのキャプチャ

Browserslist

右上「Check compatible browsers」から「defaults」をクリック、または「defaults」を入力します。

サイトのキャプチャ

defaults

「defaults」は世界中のユーザーを対象にしたデフォルトで、メンテナンスされているブラウザ、かつ0.5%以上のシェアがあるブラウザが対象です。

日本のユーザーを対象にする場合は、「Region」のプルダウンから「Japan」を選択します。

サイトのキャプチャ

defaults Japan

これで「defaults」の条件で、かつ日本のユーザーを対象にしたデフォルトです。

さまざまな条件でターゲットブラウザを調べる

Browserslistでは、さまざまな条件でターゲットブラウザを調べることができます。

ある程度のユーザーが利用しているブラウザだと、0.2%以上のシェアがあるブラウザを対象にしてみます。

サイトのキャプチャ

0.2%

前述の0.5%にはなかったブラウザが、0.2%にすると見られます。

現在サポートされていないブラウザを除いてみます。

サイトのキャプチャ

0.2% and not dead

0.2%以上のシェアがあるブラウザで、デッド バージョンを除外。

たとえば最新とその前のバージョンのみをサポート、というのもよく見かけます。どのくらいのシェアがあるのか気になりますね。

サイトのキャプチャ

last 2 versions

69.3%は厳しい数字ですね、これに限定してしまうのは危険です。

CSSやJavaScriptの機能をサポートしているブラウザのシェアを調べることもできます。たとえば、CSS Gridをサポートするブラウザのシェアです。

サイトのキャプチャ

supports css-grid

ほかにも、CSSの:has()疑似クラスだとsupports css-hasscriptタグを介してJavaScriptモジュールをサポートするバージョンだとsupports es6-moduleで分かります。

sponsors

top of page

©2022 coliss