目次
Browserslistとは
.browserslistrcファイルなどにターゲットブラウザの条件を追加して取得する仕組み。
例えば.browserslistrcに次のように追加すれば1%を超えるシェアで2バージョン前までのサポートが終了していないブラウザが対象となる。
last 2 versions > 1% not dead
BrowserslistはBabelやSCSSなどで使用されますが、書き方を間違えるとJavaScriptやCSSのコード量を無駄に増やしてしまうので注意が必要です。
※ JavaScriptだとアロー関数が変換されたり、CSSはベンダープレフィックスがたくさん付くようになってコード量が増える。
npx browserslistで対象ブラウザを確認
browserslistがローカルにインストールされている場合はnpx browserslistを実行すると.browserslistrcに設定した対象ブラウザの一覧が表示されます。
例えば.browserslistrcに何も記載していない場合はnpx browserslistを実行しても何も表示されませんが、「last 1 versions」と記載して実行すると各ブラウザの1バージョンまでを対象とした一覧が表示されます。
$ npx browserslist and_chr 108 and_ff 107 and_qq 13.1 and_uc 13.4 android 108 baidu 13.18 bb 10 chrome 108 edge 108 firefox 108 ie 11 ie_mob 11 ios_saf 16.2 kaios 2.5 op_mini all op_mob 72 opera 92 safari 16.2 samsung 19.0
not deadは必須
前述の通り、last 1 versionsだけだとサポートが終了しているIE11も対象に含まれてしまいます。
$ npx browserslist and_chr 108 and_ff 107 and_qq 13.1 and_uc 13.4 android 108 baidu 13.18 bb 10 chrome 108 edge 108 firefox 108 ie 11 ie_mob 11 ios_saf 16.2 kaios 2.5 op_mini all op_mob 72 opera 92 safari 16.2 samsung 19.0
この状態だとBabelやSCSSなどでコンパイルしたあとのコード量が無駄に増えてしまいます。
そのため、.browserslistrcではnot deadが必須になっています。
last 1 versions not dead
$ npx browserslist and_chr 108 and_ff 107 and_qq 13.1 and_uc 13.4 android 108 chrome 108 edge 108 firefox 108 ios_saf 16.2 kaios 2.5 op_mini all op_mob 72 opera 92 safari 16.2 samsung 19.0
Androidバージョン5以上の指定は意味がない
Webサイトで推奨ブラウザをAndroidバージョン5以上にしているWebサイトは多いですが、.browserslistrcにandroid >= 5を指定してもandroidの最新バージョンしか対象になりません。
これはAndroidはバージョン4.4.4を超える指定はandroidの最新バージョンを返すようになっているためです。
android >= 5
$ npx browserslist android 108
androidは4.4.4までしか有効だということを知らない人は多いので注意が必要です。
もし.browserslistrcにandroidの記述があったら削除したほうが良いでしょう。
※ バージョン4.3以前はすでにサポートが終了している。
ie指定でnot deadが効かないケースがある
.browserslistrcは上から下に設定された条件を読み込むので、not deadのあとにie >= 11があるとIE11が対象になってしまう。
そのため、not deadは必ず.browserslistrcの最後に記述して、サポート終了となっているieの設定はしないことが好ましい。
これだと対象ブラウザはなし
ie >= 11 not dead
$ npx browserslist
これだとIE11が対象になってしまう…
last 1 versions not dead ie >= 11
npx browserslist and_chr 108 and_ff 107 and_qq 13.1 and_uc 13.4 android 108 chrome 108 edge 108 firefox 108 ie 11 ios_saf 16.2 kaios 2.5 op_mini all op_mob 72 opera 92 safari 16.2 samsung 19.0
まとめ
- Browserslistの書き方を間違えるとコード量が増える
- .browserslistrcにnot deadは必須
- androidの指定は4.4.4以外はサポート終了のため意味がない
- ieの指定はサポート終了のため意味がない
