.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ファイルのサンプルです。
プロジェクトルートに配置します。
last 1 version
> 1%
記述方法
デフォルト
| 記述 | 意味 |
|---|---|
| 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をプロジェクトルートに配置後は、下記のコマンドでも確認可能です。
$ npx browserslist