Browserslistでlast 2 versionsなどの好ましくない設定が多い

Browserslistとは

package.jsonや.browserslistrcファイルなどにターゲットブラウザの条件を追加して取得する仕組み。

「Browserslistとは」で検索した際に表示される検索結果1位のWebページにもそう書いてある。

これがないとAutoprefixer, Babel, ESLint, PostCSSなどでターゲットブラウザを設定できないのでBrowserslistの設定は重要です。

重要な設定ですがBrowserslistの書き方をよく理解しておらず、好ましくない設定になっているケースが多いので、設定する際は注意が必要です。

最近は推奨環境に「最新版」のみを推奨としているWebサイトが多いのでBrowserslistにlast 2 versionsとだけ書かれていることも結構あります。

しかし、Webサイト側が最新版を推奨していても、ほとんどのユーザーが最新版または1つ前のバージョンにしているとは限りません。

最近のブラウザはバージョンアップデートの感覚が短くなっているので3バージョン前になっている可能性も十分にあります。

また、2022年9月現在のSafariの最新バージョンは16ですが、last 2 versionと書かれていればSafari 16とSafari 15が対象だと勘違いしている方が結構います。

Chromeは103、104、105のようにバージョンが1ずつ上がるのでlast 2 versionだと104、105が対象ですが、Safariは15.5、15.6、16.0となるのでlast 2 versionだと15.6、16.0が対象となり15.5以下は対象外になります。

以上の理由によりBrowserslistは「last 2 versions」ではなく「last 3 versions」を推奨します。

ちなみにlast 2 versionの設定が多いのはBrowserslistのGitHubのREADME.mdの説明でよく例として出されているのが理由の1つのようです。

last 3 versionsだけ書くとサポートが終了したブラウザも対象にしてしまうため、IE11、IE10、IE9も対象となってしまいます。

そのため、サポートが終了したブラウザを除外する「not dead」も特別な事情がない限りは記載が必須となります。

Safariはlast 3 versionsと書くだけでは例えばWebサイトの推奨環境のバージョンがSafari 14以上、Safari on iOS 12以上とかの場合はターゲットに含まれません。

SafariやSafari on iOSの推奨が3バージョンまでというWebサイトは少ないです。

そのため、別途「iOS >= 12, Safari >= 14」のような追記が必要になります。

WebサイトによってはAndroidの推奨バージョンを5や6にしている場合はBrowserslistに「Android >= 5」や「Android >= 6」と書いているのを見かけますが、Androidの場合は5未満のバージョンしか対象ブラウザのターゲットが変わらないので意味がないです。

試しに以下の3つの結果を見比べてみてください。

「defaults」と「defaults, Android >= 5」はAudience coverageが同じですが「defaults, Android >= 4」だとAudience coverageの変化が確認できます。

Browserslistは「> 0.1%」のように書けばバージョンではなくシェアで対象ブラウザを設定できます。

例えば「> 0.1% in JP, not dead」と書けば「日本でシェア0.1%のサポートされているブラウザ」ということになります。

これだと年月が経過してもシェアによる判定なのでBrowserslistを更新せず済むので楽ですが、対象ブラウザが自動で変わるのは問題があります。

対象ブラウザが自動で変わるということはAutoprefixer, Babel, PostCSSなどのコードも自動で変わるということを意味しているからです。

パーセント指定は書き出されるコードが変わることにより予期せぬバグを誘発するリスクがあるため、パーセント指定はやめたほうが良いです。