Back

Baseline: Новый подход к поддержке браузеров

Baseline: Новый подход к поддержке браузеров

Годами фронтенд-разработчики бились над устаревшим вопросом: «Какие версии браузеров мы поддерживаем?» Такая формулировка имела смысл, когда доминировал Internet Explorer, а браузеры обновлялись раз в год. Сегодня Chrome и Firefox выпускают новые версии каждые несколько недель. Safari обновляется регулярно. Старая ментальная модель больше не работает.

Web Platform Baseline предлагает лучший подход. Вместо отслеживания версий браузеров вы отслеживаете доступность функций. В этой статье объясняется, как работает Baseline, почему это важно для современной совместимости браузеров и как применять это в ваших проектах.

Ключевые выводы

  • Web Platform Baseline заменяет поддержку браузеров на основе версий на мышление о доступности функций, при поддержке Google, Microsoft, Apple и Mozilla через W3C WebDX Community Group.
  • Функции проходят через три состояния: Ограниченная доступность, Недавно доступна (работает во всех стабильных основных браузерах) и Широко доступна (поддерживается не менее 30 месяцев).
  • Используйте функции со статусом Widely available для основного функционала и функции Newly available для прогрессивных улучшений, обёрнутых в @supports или определение возможностей.
  • Browserslist теперь поддерживает запросы Baseline напрямую, а такие инструменты, как browserslist-config-baseline и CSS-поддержка ESLint, начинают интегрировать Baseline в рабочие процессы разработки.

Что такое Web Platform Baseline?

Baseline — это кросс-вендорная инициатива при поддержке Google, Microsoft, Apple и Mozilla через W3C WebDX Community Group. Индикаторы Baseline можно найти на MDN, web.dev и Can I Use.

Baseline отвечает на простой вопрос: Могу ли я безопасно использовать эту функцию во всех браузерах?

Он определяет набор основных браузеров:

  • Chrome (десктоп и Android)
  • Edge
  • Firefox (десктоп и Android)
  • Safari (macOS и iOS)

Когда функция работает во всех этих браузерах, она получает статус Baseline.

Три состояния доступности

Функции Baseline делятся на три категории:

Limited availability (Ограниченная доступность): Функция существует в некоторых браузерах, но не во всех. Используйте с осторожностью или с полифилами.

Newly available (Недавно доступна): Функция работает во всех стабильных версиях каждого основного браузера. Она интероперабельна, но появилась недавно.

Widely available (Широко доступна): Функция присутствует во всех основных браузерах не менее 30 месяцев. Большинство пользователей имеют к ней доступ.

30-месячный порог для статуса «Widely available» не случаен. Он учитывает пользователей, которые не обновляются сразу, старые устройства и производные браузеры, наследующие движки от основных. После 30 месяцев функция обычно достигает практически всех пользователей.

Почему важна эта смена ментальной модели

Традиционные политики, основанные на версиях, создают проблемы. Что означает «последние две версии Firefox», когда Firefox выпускает шесть мажорных версий за время одного проекта? Цель постоянно движется.

Мышление о доступности функций решает эту проблему. Вместо вопроса «Какие версии браузеров мы поддерживаем?» вы спрашиваете «Является ли эта функция Baseline?»

Этот сдвиг даёт три практических преимущества:

Более чёткие решения. Проверьте индикатор Baseline на MDN. Если он показывает «Widely available», используйте функцию уверенно. Никаких мысленных расчётов с номерами версий.

Лучшая коммуникация со стейкхолдерами. «Мы используем функции, доступные во всех браузерах более 30 месяцев» проще объяснить, чем «последние две версии Chrome, Firefox и Safari, плюс Firefox ESR, плюс всё, что выше 0,5% глобального использования».

Улучшенная согласованность. Команды принимают меньше субъективных решений. Политика применяется единообразно во всех проектах.

Как применять Baseline на практике

Внедрение Baseline следует простому паттерну:

Для основного функционала полагайтесь на функции со статусом Widely available. Они формируют ваш фундамент. Пользователи без современных браузеров всё равно получают работающий опыт.

Для прогрессивных улучшений используйте функции Newly available с определением возможностей. Оборачивайте их в блоки @supports или JavaScript-проверки. Пользователи со старыми браузерами получают базовый опыт, а остальные — улучшенную версию.

/* Widely available fallback */
.container {
  max-width: 100%;
}

/* Newly available enhancement */
@supports (container-type: inline-size) {
  .container {
    container-type: inline-size;
  }
}

CSS выше — чистый пример прогрессивного улучшения. Каждый браузер понимает max-width: 100%. Браузеры, которые также поддерживают container queries, получают более продвинутую вёрстку. Ничего не ломается ни для кого.

Интеграция Baseline с вашими инструментами

Baseline всё чаще поддерживается в инструментах разработчика. Browserslist теперь поддерживает запросы Baseline напрямую (например, таргетирование на функции «widely available» или конкретный год Baseline), помогая держать ваши инструменты сборки в соответствии с вашей политикой поддержки. Пакет browserslist-config-baseline предоставляет готовую конфигурацию, если вы предпочитаете не писать запросы самостоятельно.

CSS-поддержка ESLint (@eslint/css) включает правило use-baseline, которое может помечать свойства, выходящие за пределы выбранного порога Baseline. Хотя оно не идеально — может быть излишне строгим к паттернам прогрессивного улучшения — оно сигнализирует о направлении развития экосистемы.

Ожидайте более тесной интеграции с инструментами сборки, линтерами и фреймворками по мере роста принятия Baseline.

Baseline — это значение по умолчанию, а не гарантия

Baseline предоставляет сильную отправную точку, но не заменяет здравый смысл. Существуют граничные случаи. Функция может быть Baseline, но иметь значительный баг в одном браузере. Вопросы доступности могут требовать тестирования за пределами данных о совместимости. Корпоративные среды с заблокированными браузерами требуют отдельного рассмотрения.

Используйте Baseline как предположение по умолчанию, затем проверяйте, когда ставки высоки.

Заключение

Web Platform Baseline представляет фундаментальный сдвиг: от матриц поддержки на основе версий к мышлению о доступности функций. Это снижает когнитивную нагрузку, улучшает коммуникацию в команде и соответствует тому, как на самом деле работают современные браузеры.

Начните с проверки статуса Baseline на MDN перед использованием новых функций. Примите «Widely available» как свой фундамент. Добавляйте функции «Newly available» через прогрессивное улучшение. Позвольте инструментам догнать и поддержать ваш рабочий процесс.

Вопрос не в том, какие браузеры вы поддерживаете. Вопрос в том, какие функции вам нужны.

Часто задаваемые вопросы

Can I Use показывает процент поддержки по браузерам для отдельных функций. Baseline строится на этих данных, но предоставляет единый стандартизированный вердикт — Limited, Newly available или Widely available — согласованный всеми основными вендорами браузеров. Это упрощает решение от интерпретации таблиц совместимости до проверки одной метки статуса.

Baseline покрывает функции веб-платформы широко, включая CSS-свойства, JavaScript API, HTML-элементы и Web API, такие как Fetch API или Web Animations API. Любая функция, отслеживаемая WebDX Community Group и поддерживаемая во всех основных браузерах, может получить статус Baseline.

Не обязательно. Browserslist по-прежнему управляет такими инструментами, как Autoprefixer и Babel, но теперь поддерживает запросы Baseline напрямую. Вы можете таргетировать пороги Baseline внутри Browserslist или использовать browserslist-config-baseline для согласования вашего пайплайна сборки с вашей политикой.

Статус Baseline не гарантирует безбагового поведения в каждом браузере. Если известный баг влияет на ваш случай использования, протестируйте его конкретно и примените целевое решение. Baseline — надёжное значение по умолчанию, но критичный функционал всё равно требует ручной проверки на реальном поведении браузера.

Gain control over your UX

See how users are using your site as if you were sitting next to them, learn and iterate faster with OpenReplay. — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.

OpenReplay