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

То, что теперь работает везде

animation-composition

Свойство animation-composition позволяет управлять тем, как браузер комбинирует несколько анимаций, влияющих на одно и то же CSS-свойство. Это особенно полезно при сложных переходах, где важно контролировать, как накладываются изменения — заменяют друг друга, суммируются или накапливаются.

.box {
  animation: move 1s, scale 1s;
  animation-composition: add; /* или replace, accumulate */
}

Массивы без мутаций: toReversed(), toSorted(), toSpliced(), with()

В JavaScript появились новые методы массивов, которые возвращают изменённые копии, не трогая оригинал. Это делает работу с данными более предсказуемой, особенно в функциональном стиле или при работе с реактивными фреймворками.

const original = [3, 1, 2];
const sorted = original.toSorted(); // [1, 2, 3], original не изменился
const withFive = original.with(1, 5); // [3, 5, 2]

Свежие фичи, которые только появились

Active view transition

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

:active-view-transition {
  background: #f0f0f0;
}

:active-view-transition-type(hero) {
  z-index: 100;
}

Модули JavaScript в Service Workers

Теперь при регистрации Service Worker можно указать { type: "module" }, чтобы загружать скрипты с import/export. Это упрощает организацию кода при подготовке приложения к работе офлайн, кэшировании и фоновых задачах.

navigator.serviceWorker.register('sw.js', { type: 'module' });

Navigation API

Navigation API позволяет программно инициировать, перехватывать и изменять навигацию в браузере — без перезагрузки страницы. Это альтернатива истории pushState/popState и основа для современных маршрутизаторов в SPA.

navigation.addEventListener('navigate', (event) => {
  if (event.destination.url.includes('/admin')) {
    event.preventDefault();
    // показать модалку или редирект
  }
});

Новые CSS-единицы: rcap, rch, rex, ric

Появились четыре новые относительные единицы длины, привязанные к шрифту корневого элемента: rcap (высота заглавной буквы), rch (ширина нуля), rex (x-высота) и ric (ширина CJK-символа). Они особенно полезны для точной типографики в многоязычных интерфейсах.

.heading {
  font-size: 4rex; /* масштабируется от x-height корневого шрифта */
  letter-spacing: 0.1rch;
}