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

はじめに

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

Autoprefixer とは

Autoprefixer は、ターゲットブラウザにベンダープレフィックスを自動的に追加する CSS ポストプロセッサ¹です。ちなみに、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 に最適化する処理を施すものを指します。 ↩