Baseline: май 2026 — SavePearlHarbor

Уже почти июнь подходит к концу, а я так и не выпустил эту статью. Исправляюсь.

Обзор на браузерные API, которые стали Widely available в мае 2026. Раз в месяц я буду вам напоминать, что вы уже можете использовать в проде.

Каждый месяц выходят новые CSS-свойства, HTML-атрибуты, JavaScript-методы и WebAPI, но применять в проде мы их конечно же не будем. 2.5 года назад также каждый месяц выходили новые фичи в браузере, а вот их уже пора начинать применять.

Как мы понимаем, что уже можно использовать в проде?

У каждой компании, да что уж там компании, у каждой команды в компании своя методика принятия решения о внедрении той или иной фичи в проекте.

Общий же сценарий выглядит так:

— Посмотрели в пользовательские метрики. Поняли какими браузерами и их версиями в основном пользуются пользователи проекта;

— Заглянули в caniuse и поняли, какие фичи уже поддерживаются большинством браузеров;

— Приняли решение о внедрении той или иной фичи в проект.

Какие-то команды позволяют себе указывать правило «последние три версии браузеров». У других специфика проекта — проект работает исключительно на iPad с Safari. Сами понимаете, все мы разные и требования разные, и у каждого свой подход.

Baseline позволяет немного упростить процесс принятия решения о внедрении той или иной фичи в проект. Если фича Widely available, значит она уже как минимум есть во всех основных браузерах и стабильно поддерживается последние 2.5 года. Все баги пофикшены. О проблемах с перформансом уже можно не думать как о проблеме.

Какие фичи в вебе стали Widely available в марте 2026?

lh/rlh unit
User activation
Clip path boxed
:user-valid и :user-invalid

1. lh/rlh unit

Единицы lh и rlh — это относительные единицы измерения длины, зависящие от метрик шрифта.*

lh — равна значению свойства line-height элемента, на котором она используется, переведённому в абсолютные единицы (пиксели).
rlh (root lh) — равна значению единицы lh на корневом элементе документа (<html>).

Чтобы понять lh/rlh быстрее, то можете вспомнить как работает em/rem. lh/rlh работает точно также только от line-height, а не font-size.

Синтаксис

<число>lh или <число>rlh (например, 1lh, 2.5rlh).

Примеры использования

1. Задание высоты, кратной высоте строки
Позволяет легко создавать блоки, высота которых идеально совпадает с определённым количеством строк текста.

.article-title {  /* Высота заголовка будет равна ровно двум строкам его шрифта */  height: 2lh;}

2. Использование rlh для глобальных отступов

Если вам нужно, чтобы размеры элементов зависели от высоты строки корневого элемента, независимо от того, в каком контексте они находятся. Это стартовый набор для вертикального ритма.

html {  font-size: 16px;  line-height: 1.5; /* Рассчитанное значение line-height = 24px */}.card {  /* Отступы будут равны 24px (1 * rlh корневого элемента) */  padding: 1rlh;   margin-bottom: 2rlh; /* отступ снизу блока 48px */}

3. Отображение вертикального ритма

Я создал утилитарный класс horizontal-stripes, чтобы можно было посмотреть вертикальный ритм на сайте:

.horizontal-stripes {  background-image: repeating-linear-gradient(    rgba(0, 188, 212, 0.5) 0,    rgba(0, 188, 212, 0.5) 1px,    transparent 1px,    transparent 1rlh  );}

Добавляем класс к <body> или <main> и наблюдаем вертикальную сетку.

Источники

2. User activation

Свойство userActivation содержит информацию о состоянии взаимодействия пользователя в текущем окне.

userActivation предоставляет два ключевых свойства:

isActive (переходная активация / transient activation) — возвращает true, если пользователь взаимодействует со страницей прямо в данный момент. Эта активация кратковременна и сбрасывается через короткий промежуток времени после последнего действия.
hasBeenActive (_липкая_ активация / sticky activation) — возвращает true, если пользователь взаимодействовал со страницей хотя бы один раз за время её существования. Это состояние сохраняется на протяжении всей жизни страницы.

Синтаксис

navigator.userActivation

Примеры использования

1. Проверка текущего взаимодействияМожно использовать isActive, чтобы проверить, взаимодействует ли пользователь со страницей прямо сейчас. Это часто используется перед запросом на воспроизведение аудио или видео, так как браузеры блокируют автовоспроизведение без явного и недавнего действия пользователя.

if (navigator.userActivation.isActive) {  // Пользователь только что кликнул или нажал клавишу — можно запускать видео  video.play();}

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

if (navigator.userActivation.hasBeenActive) {  // Пользователь уже взаимодействовал со страницей хотя бы раз  startHeavyAnimation();}

Источники

MDN Web Docs: Navigator.userActivation

Clip path boxes

fill-box, stroke-box и view-box — это значения clip-path, которые помогают выбрать, от какой области SVG-элемента нужно считать обрезку.Они отвечают на вопрос: по каким границам нужно обрезать SVG-фигуру?

fill-box: обрезка считается по самой фигуре, без учёта обводки. Например, если у круга есть толстая линия вокруг, она не влияет на область обрезки.
stroke-box: обрезка считается по фигуре вместе с её обводкой. То есть если у элемента есть толстая линия вокруг, она тоже входит в область, по которой рассчитывается обрезка.
view-box: обрезка считается не по конкретной фигуре, а по всему SVG-холсту. Это полезно, когда нужно обрезать элемент относительно размеров всего SVG, а не только самого элемента.

Синтаксис

clip-path: <basic-shape> <geometry-box>;

Примеры использования

1. Иконка с толстой обводкой

Представьте SVG-иконку сердца, звезды или маркера на карте. У неё есть толстая обводка. Если обрезать такую иконку без учёта обводки, часть линии может некрасиво срезаться.В этом случае можно использовать stroke-box:

.icon {  stroke: black;  stroke-width: 8px;  clip-path: circle(50%) stroke-box;}

2. Бейдж или стикер, где обводка должна обрезаться

Например, круглый стикер «New», «Sale» или «Акция». У него есть цветная заливка и толстая декоративная рамка. Иногда нужно обрезать элемент строго по основной фигуре, а лишнюю часть рамки срезать.Тут поможет fill-box:

.badge {  stroke: tomato;  stroke-width: 12px;  clip-path: inset(10%) fill-box;}

Источники

MDN Web Docs: clip-path

4. :user-valid and :user-invalid

Псевдоклассы :user-valid и :user-invalid применяются к элементам форм, которые прошли или не прошли валидацию, но с одним критическим отличием от стандартных :valid и :invalid, которые по моему скромному мнению не должны использоваться в современных интерфейсах. Они срабатывают только после того, как пользователь начал взаимодействовать с элементом. Это позволяет не показывать стили валидации (красные рамки) до тех пор, пока пользователь сам не коснется поля или не попытается отправить форму. В целом, от :valid и :invalid уже можно отказываться в пользу :user-valid и :user-invalid.

:user-valid — элемент успешно прошел валидацию после взаимодействия пользователя.
:user-invalid — элемент не прошел валидацию после взаимодействия пользователя.

Синтаксис

Синтаксис записывается стандартно для псевдоклассов:

input:user-invalid {}input:user-valid {}

Примеры использования

1. Отложенная подсветка ошибок (:user-invalid)

:user-invalid покажет ошибку только после того, как пользователь попытается отправить форму или уберет фокус с пустого поля.

input:user-invalid {  border: 2px solid red;}input:user-invalid + span::before {  content: "✖";  color: red;}

2. Успешное заполнение с мгновенной реакцией на исправление (:user-valid)

Показывает зеленую рамку или иконку галочки только после того, как пользователь ввел корректные данные. Особенность :user-valid заключается в том, что если поле было невалидным, а пользователь начал его исправлять, статус обновляется мгновенно на каждом нажатии клавиши, даже если фокус всё еще находится в поле.

input:user-valid {  border: 2px solid green;}input:user-valid + span::before {  content: "✓";  color: green;}

3. Умная логика обновления стилейСогласно спецификации, если поле было валидным, когда пользователь начал с ним взаимодействовать, стили валидации обновятся только тогда, когда пользователь переведет фокус на другой элемент (blur). Но если поле было невалидным и пользователь его исправляет, браузер перепроверяет валидность на каждое нажатие клавиши, мгновенно убирая красную подсветку, как только данные станут корректными.

Источники

В следующем месяце будет рекордное количество фич, примерно 16. Так что новый выпуск я начинаю писать уже сейчас. До встречи в июле.

Скрытый текст

Привет. Я также пишу про CSS-спецификации простым языком. Веду фронтенд дайджест. Ежедневно исследую CSS. Создаю инструменты. Об этом всём я пишу в телеграм(пока что) канале, блоге и других ресурсах. Телеграм является входной точкой. Там без ереси, только код и живые встречи — https://t.me/greatAttractorCode

ссылка на оригинал статьи https://habr.com/ru/articles/1053360/