Baseline 2026: какие Web API и CSS-фичи уже безопасно использовать в бою

К 2026 году скорость эволюции веб-платформы достигла пика — браузеры обновляются каждые несколько недель, и разработчику всё сложнее уследить, какие фичи уже «готовы к бою». Инициатива Web Platform Baseline, поддерживаемая Google, Microsoft, Apple и Mozilla в рамках W3C WebDX Community Group, предлагает простую и надёжную систему оценки: вместо того чтобы гадать о поддержке по версиям браузеров, вы ориентируетесь на чёткие статусы доступности функций. Индикаторы Baseline уже отображаются на MDN, web.dev, Can I Use и в Chrome DevTools, поэтому решение «можно ли это использовать в проде?» сводится к одному взгляду.

В этой статье мы разберём, какие именно Web API и CSS-возможности достигли статусов Newly available и Widely available в первом полугодии 2026 года — и как их применять с умом.

Что такое Baseline и как в нём ориентироваться

Baseline вводит три уровня зрелости для каждой веб-фичи:

Limited availability (Ограниченная доступность): функция есть не во всех основных браузерах. Нужны полифилы или флаги.
Newly available (Недавно доступна): функция работает в последних стабильных версиях всех четырёх ключевых браузеров — Chrome, Edge, Firefox и Safari. Она интероперабельна, но ещё не обкатана временем.
Widely available (Широко доступна): функция присутствует во всех основных браузерах не менее 30 месяцев (2,5 года). Именно этот статус означает «безопасно использовать в любом проекте».

Правило, которое рекомендуют эксперты: Widely available — для критичного функционала, Newly available — для прогрессивных улучшений, обёрнутых в @supports или feature detection.

Новинки января 2026 (Newly available)

Январь 2026 дал мощный старт году: несколько крупных API и CSS-единиц перешли в разряд «недавно доступных», а одно важное улучшение раскладки — в «широко доступное».

:active-view-transition — управление анимацией переходов между состояниями

Псевдокласс :active-view-transition позволяет нацеливаться на корневой элемент документа именно в тот момент, когда активен View Transition (переход между состояниями страницы). Это решает задачу временных глобальных стилей: можно изменить фон оверлея, z-индексы слоёв или отключить pointer-events на время анимации — и всё само вернётся обратно после завершения перехода.

:root:active-view-transition {
  background: rgba(0, 0, 0, 0.08);
}

:root:active-view-transition .overlay {
  /* гарантируем, что оверлей перекроет все элементы на время перехода */
  z-index: 9999;
}

JavaScript-модули в Service Worker

Service Worker теперь поддерживает стандартные ES-модули во всех движках. Достаточно указать type: 'module' при вызове navigator.serviceWorker.register(), чтобы использовать import и export внутри воркера. Это приводит Service Worker в соответствие с современными практиками разработки: нормальная организация кода, явные зависимости и возможность шарить код между главным потоком и фоновым воркером.

// Регистрация модульного Service Worker
await navigator.serviceWorker.register('/sw.js', {
  type: 'module',
});

// sw.js — внутри Service Worker
import { precache, strategy } from './cache-utils.js';
precache(['/app.js', '/style.css']);

Десятилетие разработчики мучились с window.history, который никогда не проектировался под SPA. popstate не срабатывает на программные pushState/replaceState, нельзя прочитать весь стек истории, и приходится вручную ловить клики по ссылкам, вызывать preventDefault(), дёргать DOM — букет боли.

Navigation API даёт один централизованный обработчик navigate для любых переходов: клик по ссылке, отправка формы, кнопки «назад/вперёд» и программный вызов navigation.navigate(). Метод event.intercept() берёт на себя рутинные задачи: обновление URL и стека истории, управление фокусом для доступности.

// ОДИН обработчик на все типы навигации
navigation.addEventListener('navigate', (event) => {
  const url = new URL(event.destination.url);
  event.intercept({
    async handler() {
      // URL уже обновлён — занимаемся только UI
      await renderContent(url.pathname);
    },
  });
});

Четыре корневых CSS-единицы: rcap, rch, rex, ric

Это долгожданное расширение системы относительных единиц. Они аналогичны cap, ch, ex, ic, но привязаны к шрифту корневого элемента (:root), а не текущего.

Единица	Описание	Применение
rcap	Высота заглавной буквы корневого шрифта	Типографские раскладки, масштабируемые от основного шрифта
rch	Ширина символа «0» корневого шрифта	Контейнеры, вмещающие точное число символов
rex	x-height корневого шрифта	Вертикальное выравнивание относительно строчных букв
ric	Идеографическая ширина корневого шрифта (CJK)	Интернациональные проекты с иероглифами

Что стало Widely available в январе 2026

Февраль 2023 года был богат на новинки; спустя 30 месяцев они достигли самого высокого уровня доверия.

Двухзначный синтаксис свойства display

Возможность записывать display как два значения — внешнее и внутреннее — теперь Widely available. Вместо «магических» однословных значений вроде inline-flex можно писать явно и понятно: display: inline flex или display: block grid.

animation-composition — гибкое комбинирование анимаций

Когда несколько анимаций действуют на одно и то же свойство, animation-composition управляет их взаимодействием. Три режима:

replace (по умолчанию): новое значение заменяет базовое;
add: значение добавляется к базовому;
accumulate: значения объединяются (например, два blur складываются в один).

.card {
  transform: translateY(20px) scale(1);
}
.card:hover {
  animation: bounce 300ms;
  animation-composition: add; /* scale больше не заменяется! */
}
@keyframes bounce {
  to { transform: scale(1.05); }
}

Array by copy — немутирующие методы массивов

Методы toReversed(), toSorted(), toSpliced() и with() возвращают изменённые копии массивов, не мутируя оригинал. Это немутирующие аналоги reverse(), sort(), splice() и замена по индексу. Идеально сочетаются с иммутабельными паттернами в React, Vue и Svelte.

Март 2026: самый насыщенный месяц

Март 2026 принёс целую россыпь новых фич и рекордное количество функций, перешедших в Widely available.

Новинки марта (Newly available)

font-family: math — математический шрифт «из коробки»

Значение math для font-family автоматически использует оптимизированный для математических формул системный шрифт. Идеально для отображения MathML-контента — правильные отступы, поддержка сложных символов и лигатур без подбора шрифта вручную.

Iterator.concat() — ленивое объединение итераторов

Новый статический метод позволяет объединить несколько итерируемых объектов (массивы, Set, пользовательские итераторы) в один ленивый итератор без создания промежуточных массивов.

const numbers = [1, 2, 3];
const letters = new Set(['a', 'b', 'c']);
for (const item of Iterator.concat(numbers, letters)) {
  console.log(item); // 1, 2, 3, 'a', 'b', 'c'
}

Readable byte streams — эффективная работа с бинарными данными

Полноценная поддержка читаемых байтовых потоков в Streams API позволяет читать бинарные данные напрямую в подготовленные буферы разработчика, минуя лишнее копирование памяти. Ключевая возможность для ресурсоёмких приложений, работающих с большими файлами или сетевыми данными.

Reporting API — централизованный сбор отчётов браузера

Универсальный механизм получения уведомлений о нарушениях безопасности (CSP), устаревших вызовах API, крашах и других событиях уровня браузера. Все отчёты направляются на единый endpoint, что значительно упрощает мониторинг продакшена.

WebTransport — низколатентная связь поверх HTTP/3

WebTransport — это современное API для двунаправленной клиент-серверной коммуникации с минимальной задержкой. Построен поверх HTTP/3, поддерживает как надёжную передачу данных, так и ненадёжные датаграммы. Идеален для real-time приложений: онлайн-игр, стриминга, коллаборативных инструментов.

text-indent: each-line и hanging — продвинутая типографика

Ключевое слово each-line заставляет отступ действовать на каждую строку после жёсткого переноса (<br>), а не только на первую. Ключевое слово hanging инвертирует логику: первая строка остаётся без отступа, а все последующие — с отступом. Это основа для оформления библиографий и особых редакционных стилей.

Что стало Widely available в марте 2026

Список функций, преодолевших 30-месячный рубеж кросс-браузерной поддержки, впечатляет:

Clear-Site-Data — HTTP-заголовок, позволяющий серверу одной командой очистить кэш, куки, localStorage/IndexedDB клиента. Идеален при логауте, смене аккаунта или восстановлении после «битого» кэша.
contain-intrinsic-size — задаёт размер контейнера до загрузки содержимого, предотвращая сдвиги раскладки (CLS).
@counter-style — полноценное управление стилями маркеров списков на чистом CSS.
Device orientation events — события изменения ориентации устройства.
hyphenate-character и hyphens — управление переносами и символом переноса.
image-set() — выбор фонового изображения в зависимости от плотности пикселей экрана.
<link rel="modulepreload"> — предзагрузка JavaScript-модулей.
Overflow media queries — медиа-запросы для обнаружения переполнения.
Storage Manager API — оценка доступного и использованного места в хранилище браузера.
Update frequency media query — медиа-запрос частоты обновления экрана.
CSS Subgrid — вложенная сетка, наследующая размеры дорожек от родительского грида.

Инструменты и практические рекомендации

Browserslist и ESLint уже «в теме»

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

В экосистеме ESLint появляются плагины, которые предупреждают о CSS-свойствах, ещё не достигших Baseline Widely available, прямо в редакторе кода.

Стратегия внедрения: «ядро — Widely, прогресс — Newly»

Практический подход, рекомендуемый сообществом:

Для критичного функционала (раскладка, навигация, основные взаимодействия) используйте исключительно Widely available фичи.
Для визуальных украшений и улучшений UX смело берите Newly available, но оборачивайте в @supports или проверяйте наличие API перед вызовом.

/* Прогрессивное улучшение с @supports */
.sidebar {
  display: grid;
  /* Subgrid — Widely available с марта 2026 */
  grid-template-rows: subgrid;
}

// Проверка наличия Navigation API
if ('navigation' in window) {
  // Используем современный подход
  navigation.addEventListener('navigate', (e) => { /* ... */ });
} else {
  // Фолбэк на History API для старых браузеров
}

Где отслеживать статус фич

webstatus.dev — официальная панель Web Platform Status, единый агрегатор статусов Baseline.
MDN Web Docs — каждая страница свойства или API теперь содержит бейдж Baseline с указанием года и статуса.
web.dev/blog — ежемесячные дайджесты Baseline digest.
Can I Use — интегрировал индикаторы Baseline.

Interop 2026: заглядываем в будущее

Параллельно с Baseline идёт инициатива Interop 2026, в рамках которой вендоры согласовывают, какие функции должны стать кросс-браузерными в ближайший год. Среди ключевых направлений — Anchor Positioning, кросс-документные View Transitions, Storage Access API и завершение работы над CSS-вложенностью (Nesting).

Важно понимать разницу: Interop — это «что мы обещаем сделать совместимым», а Baseline — это «что уже совместимо сейчас».

Заключение

Baseline 2026 — это новая ментальная модель разработки. Вместо бесконечных проверок caniuse и гаданий о версиях браузеров вы опираетесь на чёткие, поддерживаемые всеми вендорами статусы доступности.

Ключевые итоги первого полугодия 2026:

Navigation API наконец-то даёт SPA-разработчикам встроенный роутер, который работает правильно из коробки.
Четыре корневые CSS-единицы и двухзначный display делают типографику и раскладку гибче без дополнительных обёрток.
WebTransport, Readable byte streams и Reporting API открывают новые горизонты для производительных и наблюдаемых приложений.
Функции, вошедшие в Widely available, можно смело закладывать в фундамент любых проектов — они проверены временем и доступны практически каждому пользователю.

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