頁面為了能在各個品牌、各個版本的瀏覽器上正常顯示，需要處理各種兼容問題：將現代的 JavaScript 語法（ESNext）轉譯為舊版的 JavaScript 語法（ES5）；為不兼容的 CSS 樣式添加瀏覽器前綴（-webkit-、-moz-）；等等。

現代的前端頁面開發流程，都有相應的工具為開發者自動地處理這些兼容問題：Autoprefixer - 為 CSS 樣式，自動添加不兼容的瀏覽器前綴；Babel - 將 JavaScript 語法轉譯為瀏覽器兼容的舊版語法；等等。

但這些工具，都需要有一個瀏覽器的兼容範圍，來指導它們何種顆粒度地處理兼容問題：是兼容最新的 Chrome 瀏覽器就可以了？還是兼容 95%用户所使用的瀏覽器？或者其他情況？

慶幸的是，這些工具都支持統一的方式來指定瀏覽器範圍 —— browserslist。

介紹

browserslist 使用 caniuse-lite（caniuse的簡化版）的數據，按照篩選的信息，計算出瀏覽器的範圍。

例如：

中國用户佔有率大於 5%的瀏覽器 > 5% in cn

browserslist 計算出了瀏覽器範圍 => Chrome for Android 129、UC Browser for Android 15.5、Safari on iOS 17.5

Autoprefixer、Babel 這些工具，根據 browserslist 計算出的瀏覽器範圍，決定哪些語法需要處理兼容問題：CSS 屬性 transform 是否需要添加瀏覽器前綴（-webkit-、-moz-）；let、const 變量聲明是否轉譯為 var；等等。

使用

browserslist 篩選語句結構：query[combiner query][combiner query]...

query 是查詢；combiner 是連接器。

query（查詢）

> 5%

在全球範圍內，用户量大於 5% 的瀏覽器。

>= 0.1% in cn

在中國範圍內，用户量大於 0.1% 的瀏覽器。

！！以該地區為統計維度，而不是全球（例如，中國地區，就以中國的所有數據為統計量，不考慮全球的數據）

在 browserslist 中國家、地區的縮寫

常用示例：

• cn - China
• us - USA
• alt-af - Africa
• alt-as - Asia
• alt-eu - Europe
• alt-na - North America

大小寫不敏感

詳細列表可以查看 caniuse/region-usage-json

last 2 versions / last 2 major versions

篩選出：每個品牌的瀏覽器中，最後發佈的兩個版本（或主版本）。

例如，對於 Safari 瀏覽器：

• last 2 versions - 18.0 / 17.6
• last 2 major versions - 17.x ~ 18.x 範圍內的所有版本

last 2 Safari versions / last 2 Safari major versions

與last 2 versions / last 2 major versions相比，限制了瀏覽器品牌。

browserslist 中使用的瀏覽器標識符

• ↪︎ name 該瀏覽器的內核是name，在 browserslist 查詢該瀏覽器時，按name查詢。
• 在 IOS 設備上，所有的瀏覽器的內核都是系統的 WebKit。
• 在 Android 設備上，上述瀏覽器中除Firefox是Gecko內核，其他瀏覽器都是Blink內核（Chrome 瀏覽器就是 Blink 內核）；這些其他的瀏覽器中，可能會使用系統的 WebView，也有可能瀏覽器內嵌一個 Blink 內核。

unreleased versions / unreleased Chrome versions

未發佈的瀏覽器，包含 alpha 和 beta 版本。 / 未發佈的 Chrome 瀏覽器，包含 alpha 和 beta 版本。

since 2021-01-15 / since 2020-01 / since 2020 / last 3 years

根據瀏覽器的發佈時間，篩選出符合時間要求的瀏覽器版本。

cover 99.5% / cover 99.5% in cn

在全球範圍內（或指定地區），按照瀏覽器的用户佔比從大到小排列，累加用户佔比，直到符合要求為止。

iOS >= 13.2

Safari on IOS 版本大於或等於 13.2

supports

fully supports es6-module - 全部支持 es6-module 的瀏覽器

partially supports css-grid - 部分支持 css-grid 的瀏覽器

格式：fully supports {certain_feature} / partially supports {certain_feature}

詳細列表可以查看 caniuse/features-json

dead

24 個月沒有官方支持或更新的瀏覽器：

• Baidu >= 0
• ie <= 11
• ie_mob <= 11
• bb <= 10
• op_mob <= 12.1
• samsung 4

Firefox ESR

最新的火狐 ESR（長期支持版） 版本的瀏覽器。

combiner（連接器）

連接各個 query，分為三個連接器：

• or / ,
• and
• not

combiner type	示意圖	例子
or / ,（union）		> .5%, last 2 versions
and（intersection）		> .5% and last 2 versions
not（negation）		> .5%, not dead（在用户佔有率大於 0.5%的範圍內，去掉已經不支持的瀏覽器）

not需要聯繫前面的 query，因此不能位列第一位。

not不關心前面的連接符，> .5% or not dead、> .5% , not dead、> .5% and not dead這三個語句的含義都是一樣的。

defaults

browserslist 中的最佳實踐：在沒有更好的查詢條件情況下，defaults可以很好地覆蓋用户瀏覽器範圍。

其代表的查詢列表為：> 0.5%, last 2 versions, Firefox ESR, not dead

查詢網站

可以通過在線網站，快捷地查詢目標瀏覽器的範圍，以及用户佔有率。

總結

browserslist 只是查詢 caniuse 數據的一個工具，通過查詢語句，可以很好地為開發者提供目標瀏覽器的範圍。