.browserslistrcは、「AutoprefixerでCSSにどのベンダープレフィックスを付けるか」などを決める設定ファイルです。
Autoprefixer以外にも対応していてツールごとに設定を持たずに済むので、ツール間で対象ブラウザ設定の齟齬が起こるのを防げます。
ブラウザのバージョンを直接指定せず、カバー率や直近○年という方法で指定しておくと、ブラウザのバージョンアップや、新しいブラウザの登場、シェアの激変などへの手動での設定変更が不要になります。
.browserslistrcファイルではなく、package.json に記述することも可能です。
対応ツール
対応するツールは下記です。
- Autoprefixer
- Babel
- postcss-preset-env
- eslint-plugin-compat
- stylelint-no-unsupported-browser-features
- postcss-normalize
- obsolete-webpack-plugin
(https://github.com/browserslist/browserslist)
※typescriptの変換のターゲットは.tsconfigファイルのtargetに書きます。
サンプル
.browserslistrcファイルのサンプルです。
プロジェクトルートに配置します。
記述方法
デフォルト
| 記述 |
意味 |
| defaults |
> 0.5%, last 2 versions, Firefox ESR, not dead |
特定のブラウザのバージョンを指定
| 記述 |
意味 |
| ie 6-8 |
IEの6～8 |
| Firefox > 20 |
バージョン20より新しいFirefox |
| iOS 7 |
iOSのSafariのバージョン7 |
| Firefox ESR |
最新の「Firefox Extended Support Release」バージョン |
| 「>」以外に「>=」「<」も有効です。 |
|
browserslist-config-xxxx
| 記述 |
意味 |
| extends browserslist-config-google |
browserslist-config-googleを使う |
ビジターのカバー率で指定
地域コードのリスト https://github.com/ben-eb/caniuse-lite/tree/master/data/regions
| 記述 |
意味 |
| > 5% |
世界の使用状況統計を使用で5%以上 |
| > 5% in US |
アメリカの使用統計で5%以上 |
| > 5% in alt-AS |
アジア地域の利用統計で5%以上 |
| > 5% in my stats |
自国の利用統計で5%以上 |
| > 0% |
使用率が0%以上のブラウザ(全てのブラウザ) |
年で指定
| 記述 |
意味 |
| since 2015 |
2015年以降にリリースされたすべてのバージョン |
| last 2 years |
過去2年にリリースされたすべてのバージョン |
最新版から過去何バージョンまでか指定
| 記述 |
意味 |
| last 2 versions |
各ブラウザの最後の2つのバージョン |
| last 2 Chrome versions |
Chromeブラウザの最新の2バージョン |
| last 2 major versions |
最新の2メジャーバージョン |
| last 2 iOS major versions |
iOSのSafariの最新の2メジャーバージョン |
アルファ版、ベータ版
| 記述 |
意味 |
| unreleased versions |
アルファ版とベータ版 |
| unreleased Chrome versions |
chromeのアルファ版とベータ版 |
Node.js
| 記述 |
意味 |
| maintained node versions |
すべてのNode.jsバージョン |
| node 10 |
Node.js 10.x.x |
| current node |
Browserslistで現在使用されているNode.jsのバージョン |
除外
notキーワードを使います。
| 記述 |
意味 |
| not ie <= 8 |
ie8未満を除外 |
サポート状況
notと組み合わせて「not dead」として使う事になると思います。
使用例：last 2 versionsではIE10もサポートされてしまうので、IE10を除外するときなど
| 記述 |
意味 |
| dead |
24ヶ月以内にアップデートされてないバージョンのブラウザ |
確認
https://browserl.ist/ で該当するブラウザの一覧をチェックできます。
.browserslistをプロジェクトルートに配置後は、下記のコマンドでも確認可能です。
