ハローハリネズミ - 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 通りありますが、どちらも非常に簡単です。
-
package.json
で設定する方法 -
.browserslistrc
で設定する方法
今回は 1. の 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
オプションが廃止予定です。今年の非推奨は今年のうちに推奨にしましょう。
-
CSS ポストプロセッサとは、純粋な CSS をより良い CSS に最適化する処理を施すものを指します。 ↩
Author And Source
この問題について(ハローハリネズミ - Browserslist でターゲットブラウザの設定), 我々は、より多くの情報をここで見つけました https://qiita.com/toshifumiimanishi/items/1e68d8229dddef0895ce著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .