Browserslist でベースラインを使用する

コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

Tony Conway

公開日: 2025 年 5 月 7 日

Browserslist は、フロントエンド コードベースでサポートされている最小ブラウザ バージョンを構成するための最も一般的なツールの 1 つです。デベロッパーが package.json ファイルに browserslist クエリを追加すると、Browserslist はサポートされている最小ブラウザのリストを公開します。Browserslist は、次のような一般的な linting、polyfilling、パッケージング ツールで使用できます。

• Autoprefixer
• @babel/preset-env を使用した Babel
• postcss-preset-env を使用した PostCSS
• eslint-plugin-compat を使用した ESLint
• stylelint-no-unsupported-browser-features を使用した Stylelint
• webpack

ベースライン ターゲット

ベースラインを使用する場合は、ユーザーベースを考慮して、ターゲットとするベースライン機能セットを決定する必要があります。

• ベースライン（広範囲に利用可能）には、過去 30 か月以上前のベースライン コア ブラウザセットで完全にサポートされていたすべてのウェブ機能が含まれます。
• ベースライン年の機能セット（ベースライン 2020 など）には、指定された年の末日に新しく利用可能になったすべての機能が含まれます。

ユーザーベースによっては、ベースラインの「広く利用可能」をターゲットに設定できる場合もありますが、古いベースライン年をターゲットに設定しなければならない場合もあります。アナリティクス ツールまたは RUM ツールを使用して、ユーザーが使用しているブラウザのバージョンを確認します。

browserslist-config-baseline をインストールします。

ターゲットとするベースライン機能セットを決定したら、そのターゲットをデベロッパー ツールに適用できます。browserslist を使用するツールでこれを実現する最も簡単な方法は、browserslist-config-baseline をインストールすることです。

# npm npm i browserslist-config-baseline@latest -D  # yarn yarn add --latest browserslist-config-baseline -D  # bun bun add browserslist-config-baseline@latest -d 

ターゲティング方法: ベースライン（幅広く利用可能）

ベースラインの一般提供をターゲットにするには、extends キーワードを使用して package.json の browserlist 構成を更新または追加します。

{   ...   "browserslist": [     "extends browserslist-config-baseline"    ]   ... } 

browserslist がサポートされているブラウザのリストを読み込むと、browserslist-config-baseline は、現在広く利用可能なすべての機能をサポートする現在の最小ブラウザ バージョンを動的に生成します。extends browserslist-config-baseline を .browserslistrc ファイルに追加することもできます。この場合も、同じ方法で処理されます。

ベースライン年をターゲットに設定する方法

ベースライン年特徴セットをターゲットに設定する場合は、browserslist クエリの末尾に / と、YYYY 形式の年を追加します。

"browserslist": "extends browserslist-config-baseline/2020" 

ダウンストリーム ブラウザを指定する方法

ベースラインのコア ブラウザセットには、Chrome、Edge、Firefox、Safari が含まれます。他のブラウザは Chrome や Edge と同じオープンソース コード（Chromium）をベースとしており、実装する Chromium のバージョンと同じ機能セットをサポートする必要があります。

browserslist-config-baseline は baseline-browser-mapping を使用して、ブラウザ バージョンとサポートされている機能セットを関連付けます。UC モバイル ブラウザと QQ モバイル ブラウザのマッピングは baseline-browser-mapping で利用できます。今後、他のブラウザも追加される可能性があります。

これらのブラウザをベースライン構成に含めるには、browserslist 構成のモジュール名の直後に /with-downstream を追加します。

"browserslist": "extends browserslist-config-baseline/with-downstream" 

または

"browserslist": "extends browserslist-config-baseline/with-downstream/2020" 

browserslist-config-baseline の使用例

パッケージング ツールで

browserslist-config-baseline をリポジトリに追加すると、すぐに効果が現れます。Babel は、JavaScript をパッケージ化するための一般的なビルドツールです。@babel/preset-env パッケージのデフォルトを使用すると、最新の JavaScript API とメソッドの多くが、古いブラウザで必要となる冗長な構文に置き換えられます。

ただし、同じサンプル プロジェクトで browserslist-config-baseline をターゲット ベースライン 2020 に設定すると、必要な構文変換が少なくなるため、この JavaScript の出力サイズが大幅に小さくなります。

Google Chrome Labs の baseline-demos リポジトリにあるサンプルコードを使って、この方法を試してみてください。

リンターで

一部のリンターはすでに Browserslist に対応しています。また、互換性モジュールを使用して Browserslist に対応するようにすることもできます。たとえば、stylelint は stylelint-browser-compat モジュールを使用して browserslist 構成を使用できます。browserslist-config-baseline を使用するように stylelint.config.js ファイルを設定します。

module.exports = {   plugins: ['stylelint-browser-compat'],   rules: {     'plugin/browser-compat': [       true,       {         browserslist: ['extends browserslist-config-baseline'],       },     ],   }, }; 

Stylelint は、現在 Baseline Widely に含まれていない CSS にフラグを立てるようになりました。

Stylelint には、ベースライン ルールを直接設定できるプラグインも用意されていますが、すでに browserslist を使用して構成を処理している場合は、browserslist-config-baseline がドロップイン ソリューションです。

browserslist-config-baseline に貢献する方法

browserslist-config-baseline の機能リクエストを行う場合は、GitHub リポジトリで問題を作成するか、pull リクエストを送信してください。

ダウンストリームのブラウザデータをさらに提供する場合や、データに関する問題を報告する場合は、baseline-browser-mapping リポジトリで問題を作成するか、プル リクエストを送信してください。