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

Tony Conway

Jeremy Wagner

公開日: 2025 年 5 月 7 日、最終更新日: 2025 年 9 月 17 日

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

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

ベースライン ターゲット

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

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

ユーザーベースによっては、Baseline Widely available をターゲットにできる場合もあれば、古い Baseline 年をターゲットにする必要がある場合もあります。アナリティクス ツールや RUM ツールで、ユーザーが使用しているブラウザのバージョンを確認します。

Baseline Newly または Widely available をターゲットにする方法

Baseline のサポートは、いくつかの異なるクエリを通じて Browserslist に組み込まれています。Baseline Newly available ブラウザをターゲットにする場合は、Browserslist 構成で baseline newly available を指定してみてください。

{
  ...
  "browserslist": [
    "baseline newly available"
   ]
  ...
}

baseline widely available をクエリとして指定することもできます。

{
  ...
  "browserslist": [
    "baseline widely available"
   ]
  ...
}

基準年をターゲットに設定する方法

ベースラインの年次機能セットをターゲットにする場合は、クエリで年を指定します。たとえば、2024 年の機能セットをターゲットにする場合は、baseline 2024 のように指定します。

"browserslist": "baseline 2024"

baseline 2015 から今年までの年を指定できます。

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

Baseline のコアブラウザ セットには、Chrome、Edge、Firefox、Safari が含まれています。他のブラウザは、Chrome や Edge と同じオープンソース コード（Chromium）をベースとしており、実装している Chromium のバージョンと同じ機能セットをサポートしているはずです。これらのブラウザをベースライン構成に含めるには、ベースライン クエリの後に with downstream を追加します。たとえば、下流のブラウザを Baseline Widely available の一部としてターゲットにするには、baseline widely available with downstream を指定します。

"browserslist": "baseline widely available with downstream"

baseline newly available with downstream も有効なクエリです。年間目標に with downstream を追加することもできます。

"browserslist": "baseline 2024 with downstream"

Baseline クエリの例

パッケージング ツール

プロジェクトで Browserslist が提供するベースライン クエリを使用すると、すぐに効果が得られます。Babel は、JavaScript のパッケージングによく使用されるビルドツールです。@babel/preset-env パッケージのデフォルトを使用すると、多くの最新の JavaScript API とメソッドが、古いブラウザで必要となるより冗長な構文に置き換えられます。

ただし、同じサンプル プロジェクトで baseline 2020 のクエリを使用して 2020 機能セットをターゲットにすると、必要な構文変換が少なくなるため、この JavaScript の出力サイズが大幅に減少します。

Google Chrome Labs の baseline-demos リポジトリのサンプルコードを使用して、ご自身で試してみてください。

リンター内

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

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

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

Stylelint には、ベースライン ルールを直接設定できるプラグインも用意されていますが、Browserslist を使用して構成を処理している場合は、Browserslist が提供する組み込みのベースライン クエリを使用することもできます。