Используйте базовый уровень со списком браузеров

Tony Conway

Jeremy Wagner

Опубликовано: 7 мая 2025 г., Последнее обновление: 17 сентября 2025 г.

Browserslist — один из самых популярных инструментов для настройки минимально поддерживаемых версий браузеров в коде фронтенда. Разработчики добавляют запрос browserslist в файл package.json (или другую точку конфигурации Browserslist, например, файл .browserslistrc ), и Browserslist предоставляет список минимально поддерживаемых браузеров. Browserslist можно использовать с широким спектром популярных инструментов линтинга, полифиллинга и упаковки, включая:

• Автопрефиксер
• Babel с использованием @babel/preset-env
• PostCSS с использованием postcss-preset-env
• ESLint с использованием eslint-plugin-compat
• Stylelint с использованием stylelint-no-unsupported-browser-features
• вебпак

Базовые цели

Принимая решение об использовании Baseline, следует учесть базу пользователей и решить, на какой набор функций Baseline вы хотите нацелиться:

• Baseline Widely available включает в себя все веб-функции, которые полностью поддерживались основным браузером Baseline 30 или более месяцев назад.
• Наборы функций базового года, например, Baseline 2020 , включают все функции, которые были впервые доступны в конце указанного года.

В зависимости от вашей пользовательской базы вы можете выбрать Baseline Widely Available или выбрать более раннюю версию Baseline. Чтобы узнать, какие версии браузеров используются вашими пользователями, обратитесь к инструментам аналитики или RUM.

Как ориентироваться на базовый уровень: новый или широко доступный

Поддержка Baseline встроена в Browserslist с помощью нескольких различных запросов. Если вы хотите настроить Baseline для новых доступных браузеров, попробуйте указать baseline newly available в конфигурации Browserslist:

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

Вы также можете указать baseline widely available в качестве запроса:

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

Как нацелиться на базовые годы

Если вы хотите настроить набор характеристик базового года, укажите год в запросе, например, baseline 2024 если вы хотите настроить набор характеристик 2024 года:

"browserslist": "baseline 2024"

Вы можете указать годы от baseline 2015 до текущего года.

Как указать нижестоящие браузеры

Базовый набор браузеров включает Chrome, Edge, Firefox и Safari. Другие браузеры основаны на том же открытом исходном коде, что и Chrome и Edge — Chromium — и должны поддерживать тот же набор функций, что и любая версия Chromium, которую они реализуют. Чтобы включить эти браузеры в конфигурацию Baseline, добавьте with downstream после запроса Baseline. Например, чтобы включить браузеры, работающие в рамках 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"

Примеры базовых запросов в действии

В упаковочных инструментах

Использование базовых запросов, предлагаемых Browserslist, в вашем проекте может дать мгновенный эффект. Babel — популярный инструмент сборки для упаковки Javascript. Если вы используете значения по умолчанию пакета @babel/preset-env , многие современные API и методы Javascript будут заменены более сложным синтаксисом, требуемым старыми браузерами:

Однако использование запроса к baseline 2020 для нацеливания набора функций 2020 в том же проекте-примере значительно уменьшает размер выходного кода Javascript, поскольку требуется меньше преобразований синтаксиса:

Попробуйте сделать это самостоятельно, используя пример кода в репозитории baseline-demos лаборатории Google Chrome.

В линтерах

Некоторые линтеры уже работают с Browserslist или могут быть настроены для работы с Browserslist с помощью модуля совместимости. Например, stylelint может использовать конфигурацию browserslist с помощью модуля stylelint-browser-compat . Настройте файл stylelint.config.js на использование выбранного вами базового запроса:

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

Stylelint теперь будет отмечать CSS, которые в настоящее время не являются частью Baseline Widely available:

Stylelint также предоставляет плагин , позволяющий вам напрямую задавать правила Baseline, но если вы уже используете Browserslist для обработки своей конфигурации, то использование встроенных запросов Baseline, которые предлагает Browserslist, является жизнеспособным решением.