搭配使用基準和瀏覽器清單

Tony Conway

Jeremy Wagner

發布日期：2025 年 5 月 7 日，上次更新時間：2025 年 9 月 17 日

Browserslist 是最熱門的工具之一，可用於設定前端程式碼庫支援的最低瀏覽器版本。開發人員會在 package.json 檔案 (或 Browserslist 的其他設定點，例如 .browserslistrc 檔案) 中新增 browserslist 查詢，而 Browserslist 會公開最低支援瀏覽器清單。Browserslist 可搭配各種熱門的 Linting、Polyfilling 和封裝工具，包括：

• Autoprefixer
• 使用 @babel/preset-env 的 Babel
• 使用 postcss-preset-env 的 PostCSS
• 使用 eslint-plugin-compat 的 ESLint
• 使用 stylelint-no-unsupported-browser-features 的 Stylelint
• webpack

基準目標

決定使用 Baseline 時，請考量使用者群，並決定要以哪個 Baseline 功能集為目標：

• Baseline 廣泛支援：包含 Baseline 核心瀏覽器組合在 30 個月前完全支援的所有網頁功能。
• 例如，Baseline 2020 基準年功能集包含在指定年度結束時新推出的所有功能。

視使用者群而定，您或許可以指定「基準廣泛適用」，也可能需要指定較舊的基準年份。請參閱您的 Analytics 或 RUM 工具，瞭解使用者使用的瀏覽器版本。

如何指定「基準」新推出或廣泛支援的裝置

Browserslist 內建 Baseline 支援，可透過幾種不同的查詢方式使用。如要以 Baseline Newly available 瀏覽器為目標，請嘗試在 Browserslist 設定中指定 baseline newly available：

{
  ...
  "browserslist": [
    "baseline newly available"
   ]
  ...
}

您也可以指定 baseline widely available 做為查詢：

{
  ...
  "browserslist": [
    "baseline widely available"
   ]
  ...
}

如何指定基準年

如要指定 Baseline 年度的功能集，請在查詢中指定年份，例如 baseline 2024 (如要指定 2024 年的功能集)：

"browserslist": "baseline 2024"

您可以指定 baseline 2015 到目前年份之間的年份。

如何指定下游瀏覽器

Baseline 核心瀏覽器組包含 Chrome、Edge、Firefox 和 Safari。其他瀏覽器與 Chrome 和 Edge 採用相同的開放原始碼 (Chromium)，因此應支援與所實作 Chromium 版本相同的整套功能。如要在 Baseline 設定中加入這些瀏覽器，請在 Baseline 查詢後新增 with downstream。舉例來說，如要將下游瀏覽器指定為 Baseline Widely available 的一部分，請指定 baseline widely available with downstream：

"browserslist": "baseline widely available with downstream"

baseline newly available with downstream 是另一個有效查詢，將 with downstream 新增至年度目標也是有效查詢：

"browserslist": "baseline 2024 with downstream"

Baseline 查詢的實際運作範例

封裝工具

在專案中使用 Browserslist 提供的 Baseline 查詢，可立即產生效果。Babel 是熱門的建構工具，用於封裝 JavaScript。如果您使用 @babel/preset-env 套件預設值，許多新式 JavaScript API 和方法都會替換為舊版瀏覽器所需的詳細語法：

不過，在相同範例專案中使用 baseline 2020 查詢指定 2020 年功能集，可大幅減少這個 JavaScript 的輸出大小，因為需要轉換的語法較少：

您可以使用 Google Chrome Labs baseline-demos 存放區中的範例程式碼，親自試用這項功能。

在 Linter 中

部分 Linter 已可搭配 Browserslist 使用，或可透過相容性模組搭配 Browserslist 使用。舉例來說，stylelint 可以使用 stylelint-browser-compat 模組，取用 browserslist 設定。將 stylelint.config.js 檔案設為使用您選擇的基準查詢：

module.exports = {
  plugins: ['stylelint-browser-compat'],
  rules: {
    'plugin/browser-compat': [
      true,
      {
        browserslist: ['baseline widely available'],
      },
    ],
  },
};

Stylelint 現在會標示目前不屬於 Baseline Widely available 的 CSS：

Stylelint 也提供外掛程式，可讓您直接設定基準規則，但如果您已使用 Browserslist 處理設定，使用 Browserslist 提供的內建基準查詢也是可行的解決方案。