Browserslist

Browserslist — это конфигурационный инструмент для веб-разработки, который позволяет указывать целевые браузеры и их версии, для которых предназначен проект. Он используется в экосистеме JavaScript и CSS для автоматической настройки инструментов сборки, таких как Autoprefixer, Babel, PostCSS, ESLint и других, чтобы они генерировали код, совместимый с заданным набором браузеров. Browserslist не является самостоятельным приложением, а представляет собой библиотеку (пакет) для Node.js, которая предоставляет единый формат описания целевых браузеров и API для их парсинга.

История

Инструмент был создан Андреем Ситником (Andrey Sitnik) в 2014 году. Первоначально он разрабатывался как часть проекта Autoprefixer для автоматического добавления вендорных префиксов в CSS. До появления Browserslist разработчикам приходилось вручную указывать список браузеров в конфигурациях каждого инструмента (например, отдельно для Autoprefixer, отдельно для Babel), что приводило к дублированию и рассогласованию настроек. Ситник предложил централизованный подход: один файл конфигурации, который могут читать все связанные инструменты. Первая версия Browserslist была выпущена в 2014 году и быстро получила распространение в сообществе. В 2015 году проект был переписан на JavaScript и стал частью экосистемы PostCSS. К 2018 году Browserslist стал де-факто стандартом для указания совместимости с браузерами в современной веб-разработке, его поддержка была добавлена в Babel, Webpack, stylelint и многие другие инструменты.

Принцип работы

Browserslist работает на основе базы данных caniuse (проект Alexis Deveria), которая содержит информацию о поддержке веб-технологий различными браузерами. Инструмент не проверяет реальные браузеры, а использует статические данные о версиях и их распространённости. При запросе Browserslist парсит строку запроса (например, last 2 versions) и сопоставляет её с данными caniuse, возвращая список конкретных браузеров и их версий, удовлетворяющих условию.

Формат запросов

Запросы к Browserslist представляют собой строки, которые могут комбинироваться с помощью логических операторов (, — «или», and — «и», not — «не»). Основные типы запросов:

• По версиям: last 2 versions — последние 2 версии каждого браузера; last 1 Chrome version — последняя версия Chrome.
• По рыночной доле: > 1% — браузеры, доля которых на глобальном рынке превышает 1%; > 5% in RU — браузеры с долей более 5% на рынке России.
• По дате: since 2020-01-01 — браузеры, выпущенные после указанной даты; last 2 years — браузеры, выпущенные за последние 2 года.
• По статусу: dead — браузеры, которые официально не поддерживаются (например, Internet Explorer 11); unreleased versions — версии, которые находятся в разработке или в канале бета.
• По имени: Chrome >= 90 — все версии Chrome, начиная с 90-й; Firefox ESR — последняя версия Firefox Extended Support Release.
• По умолчанию: defaults — эквивалентно > 0.5%, last 2 versions, Firefox ESR, not dead.

Примеры конфигурации

Конфигурация Browserslist может быть задана несколькими способами:

1. Файл .browserslistrc в корне проекта (наиболее распространённый способ):

``` last 2 versions not dead

0.5%

```

1. Поле browserslist в файле package.json:

``json { "browserslist": [ "last 2 versions", "not dead" ] } ``

1. Переменная окружения BROWSERSLIST:

``bash BROWSERSLIST="last 2 versions" npx autoprefixer ``

Применение

Browserslist используется в нескольких ключевых инструментах веб-разработки:

• Autoprefixer — добавляет вендорные префиксы к CSS-свойствам (например, -webkit-, -moz-) на основе заданного списка браузеров.
• Babel — транспилирует современный JavaScript (ES6+) в более старые версии, совместимые с целевыми браузерами.
• PostCSS — плагин postcss-preset-env преобразует современный CSS в совместимый вид.
• ESLint — плагин eslint-plugin-compat проверяет использование API, которые могут не поддерживаться в целевых браузерах.
• Webpack — через загрузчики, такие как babel-loader, может использовать Browserslist для настройки транспиляции.
• stylelint — плагин stylelint-no-unsupported-browser-features предупреждает о несовместимых CSS-свойствах.

Влияние на производительность и размер кода

Использование Browserslist позволяет оптимизировать финальный код проекта. Например, если в конфигурации указаны только современные браузеры (Chrome 90+, Firefox 88+), Babel не будет добавлять полифиллы для устаревших методов, таких как Array.prototype.includes или Promise, что уменьшает размер бандла. Напротив, если требуется поддержка Internet Explorer 11, Browserslist заставит инструменты добавить все необходимые полифиллы и префиксы, что увеличит объём кода, но обеспечит совместимость. Таким образом, Browserslist помогает разработчику найти баланс между поддержкой старых браузеров и производительностью.

Критика и ограничения

Основной недостаток Browserslist связан с точностью данных caniuse. База данных может устаревать или содержать неточности для редких браузеров и мобильных платформ. Кроме того, Browserslist не учитывает реальное использование браузеров в конкретном проекте — он опирается на глобальную или региональную статистику, которая может не соответствовать аудитории сайта. Ещё одним ограничением является то, что Browserslist не поддерживает запросы на основе возможностей (feature queries), а только на основе версий браузеров. Это означает, что разработчик не может указать «поддерживать браузеры, которые поддерживают CSS Grid» — вместо этого нужно вручную подбирать версии, где эта функция появилась.

Интересные факты

• Название «Browserslist» является игрой слов: «browsers» (браузеры) и «list» (список).
• Андрей Ситник, создатель Browserslist, также является автором Autoprefixer и PostCSS — одного из самых популярных инструментов для обработки CSS.
• Browserslist используется в миллионах проектов по всему миру, включая такие крупные, как React, Angular, Vue.js, Bootstrap и WordPress.
• В 2020 году Browserslist был включён в состав официального инструментария Google для веб-разработки — Lighthouse.

Источники

• Официальная документация Browserslist на GitHub (репозиторий browserslist/browserslist).
• Документация Autoprefixer (репозиторий postcss/autoprefixer).
• База данных caniuse (caniuse.com).
• Статья «Browserslist: A Tool to Manage Browser Compatibility» на сайте Smashing Magazine.
• Презентация Андрея Ситника «Browserslist: The Tool That Makes Your CSS Fast» (конференция CSSConf, 2015).