ハローハリネズミ - Browserslist でターゲットブラウザの設定


はじめに

今年 6 月に Autoprefixer が 9.6 にバージョンアップしました。(執筆時点の最新バージョンは 9.7.3 になります。)その中で browsers オプションが非推奨になりました。次の 10.0 のリリースを機に browsers オプションを廃止する予定です。今回は、browsers オプションに代わる Browserslist について紹介します。

Autoprefixer とは

Autoprefixer は、ターゲットブラウザにベンダープレフィックスを自動的に追加する CSS ポストプロセッサ1です。ちなみに、Autoprefixer の 9.7 で Browserslist でのパフォーマンス改善が行われました。詳しくはこちらを参照ください。

browsers オプション廃止理由

当初、Autoprefixer にはターゲットブラウザを設定する browsers オプションがありました。しかし、多くのツール(e.g. Babel)にもターゲットブラウザを必要とします。これが Browserslist の誕生、browsers オプションの廃止理由になります。

Browserslist とは

Browserslist は、異なるツール(e.g. Babel)間でターゲットブラウザのバージョンを共有するための設定ファイルです。

設定方法

Browserslist でターゲットブラウザを設定する方法は 2 通りありますが、どちらも非常に簡単です。

  1. package.json で設定する方法
  2. .browserslistrc で設定する方法

今回は 1. の package.json で設定する方法 を紹介します。下記のような記述を package.json に記述しましょう。

package.json
{
  "browserslist": [
    "last 2 versions",
    "ie >= 11",
    "android >= 4.4.4",
    "not dead"
  ]
}

設定は以上になります。ちなみに、ターゲットブラウザのバージョンを確認するには下記のコマンドを実行しましょう。

$ npx browserslist

まとめ

今回は Autoprefixer に焦点を当てて Browserslist について解説しました。Browserslist は Autoprefixer 以外のツールでも使用できます。先述したように Autoprefixer 10.0 で browsers オプションが廃止予定です。今年の非推奨は今年のうちに推奨にしましょう。


  1. CSS ポストプロセッサとは、純粋な CSS をより良い CSS に最適化する処理を施すものを指します。