04.02.2026

CSS и HTML фичи в Baseline 2025

В прошлом году (+ в январе 2026) довольно много платформенных фич достигли статуса Baseline Widely Available — это значит, что они поддерживаются во всех основных браузерах уже 30 месяцев! А это повод ~~бескомпромиссно тащить их в прод~~ проверить аналитику по пользовательским устройствам и браузерам в вашем проекте (скорее всего ваши пользователи уже обзавелись браузером, которые эти фичи поддерживают).

Собрал списком все фичи с кратким описанием и моими комментами к их использованию.

CSS

Container Queries — применение стилей на основе размеров родительского контейнера, а не viewport. Позволяет создавать адаптивные компоненты, которые реагируют на свой контейнер.

.card {
  container-type: inline-size;
}

@container (min-width: 300px) {
  .card { background-color: lightblue; }
}

Мнение: 5 из 5, но требует перестроить майндсет в целом при работе с UI (то есть не только вам как разработчику, но ещё из дизайнеру). Хорошо ложится на UI-киты и разработку изолированных компонентов.

Individual Transform Properties — отдельные свойства translate, scale, rotate вместо одного transform. Упрощает анимации и улучшает читаемость кода.

.element {
  translate: 20px 10px;
  scale: 0.8;
  rotate: 90deg;
}

Мнение: 3 из 5, приятный сахар, помогает сократить повторящийся код при написании трансформов, легко внедрить.

Motion Path — анимация элементов вдоль заданного пути с помощью offset-path.

.element {
  offset-path: path('M10 10 L 100 100');
  animation: move 2s linear infinite;
}

Мнение: 2 из 5, специфичная, но прикольная фича, но если появится подходящая задача и вовремя вспомнить, можно избежать использования JS для анимации движения элемента по траектории.

Grid Animation — анимация свойств grid-template-columns и grid-template-rows.

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  transition: grid-template-columns 0.3s;
}
.grid:hover {
  grid-template-columns: 1fr 2fr;
}

Мнение: 2 из 5, в целом прикольная фича для разъезжающихся динамических лейаутов, но применимость нечастая.

animation-composition — выбор способа комбинирования анимаций, влияющих на одно свойство.

.element {
  animation-composition: add; /* replace, add, accumulate */
}

Мнение: 2 из 5, если делаете руками CSS-анимации, может пригодиться, иначе не будет полезно.

color-mix() — смешивание двух цветов в заданном цветовом пространстве. Полезно для создания светлых/тёмных оттенков.

.element {
  background: color-mix(in srgb, red 50%, white 50%);
}

Мнение: 4 из 5, чрезвычайно мощная штука, если настраиваете собственную дизайн-систему, стайлгайд или UI-кит в проекте.

color() — выбор цвета из указанного цветового пространства. Поддерживает wide-gamut пространства вроде display-p3 для более насыщенных цветов.

.element {
  color: color(display-p3 0.5 0.2 0.8);
}

Мнение: 4 из 5, аналогично мнению про color-mix()

Lab и LCH — цветовые пространства с перцептивной равномерностью. Lab использует прямоугольные координаты, LCH — полярные.

Oklab и OkLCh — цветовые пространства, разработанные для лучшего соответствия человеческому восприятию цвета. OkLCh — полярный вариант Oklab.

.element {
  color: lab(50% 20 -30);
  background: lch(60% 50 150);
  color: oklab(0.5 0.2 -0.1);
  background: oklch(0.6 0.5 120);
}

Мнение: 4 из 5, формат oklch может также пригодиться для гибкой настройки цветовой палитры и её производных в проекте.

Small, Large, Dynamic Viewport Units — единицы dvh, svh, lvh для учёта UI мобильных браузеров. sv* — минимальный размер, lv* — максимальный, dv* — динамический.

.element {
  height: 100svh; /* 100% минимального viewport height */
  width: 100dvw;  /* 100% динамического viewport width */
}

Мнение: 4 из 5, если вы когда-нибудь боролись с fullscreen-высотой в вёрстке на мобилках, то в следующий раз присмотритесь к этим значениям, могут пригодиться.

Two-value display property — свойство display теперь принимает два значения для явного указания внешнего и внутреннего режима layouts. Например, inline flex или block flow.

.card {
  display: inline flex;
}
.container {
  display: block flow;
}

Мнение: 2 из 5, любопытно, но не более.

overflow: clip — обрезка содержимого без создания скроллов, с возможностью обрезки только по одной стороне

.nav-bar {
  overflow-x: clip;
  overflow-y: visible;
}

Мнение: 4 из 5, полезно, если нужно включить скролл по одно стороне + также это значение overflow, в котром не создаётся новый formatting context.

overscroll-behavior — управление поведением при прокрутке за границы.

.container {
  overscroll-behavior: contain;
}

Мнение: 4 из 5, очень узкоспециализированная фича, но может быть крайне полезна для управлением мульти-скроллом.

outline — свойства для стилизации линии вокруг элемента вне border, не влияющие на layout.

.element {
  outline: 2px dashed red;
  outline-offset: 5px;
}

Мнение: 3 из 5, фича-то старая, но был баг в Safari, который починили в 03.2023.

:nth-child() of <selector> — более точный выбор элементов с фильтром по селектору.

li:nth-child(odd of .active) {
  background: yellow;
}

Мнение: 4 из 5, прикольная штука для условной стилизации, полезно помнить перед реализацией на JS.

Media Query Range Syntax — новый синтаксис для медиа-запросов с диапазонами.

@media (400px <= width <= 800px) {
  /* стили */
}

Мнение: 4 из 5, синтаксический сахар, нравится, что наконец не нужно каждый раз вспоминать и перебирать варианты min/max-width.

Resolution Media Query — медиа-запрос для применения стилей на основе плотности пикселей устройства.

@media (min-resolution: 2dppx) {
  /* стили для high-DPI экранов */
}

Мнение: 2 из 5, узкоспециализированная фича, но может пригодиться для детальной стилизации для разных мобильных устройств.

Trigonometric Functions — sin(), cos(), tan() в CSS для математических вычислений.

.element {
  transform: rotate(calc(sin(45deg) * 1turn));
}

Мнение: 2 из 5, любопытно, но слишком хардкорно, малоприменимо в реальной жизни.

calc() Keywords — математические константы e, pi, infinity, NaN в CSS math функциях.

.element {
  font-size: calc(var(--base-size) * pi);
  height: calc(100vh * sin(pi / 2));
}

Мнение: 1 из 5, не могу придумать, где это применить.

font-palette — выбор цветовой палитры из шрифта, с возможностью переопределения отдельных цветов через @font-palette-values.

.element {
  font-palette: alternate;
}

Мнение: 1 из 5, малополезная фича, применимая только для “цветных” шрифтов, не стоит внимания

Style Containment и Inline-size Containment — изоляция стилей элемента. style ограничивает расчёт счётчиков и кавычек внутри элемента, а inline-size предотвращает установку inline-размеров элемента его содержимым, ускоряя рендеринг.

.widget {
  contain: style;
}

.container {
  contain: inline-size;
}

Мнение: 1 из 5, мелкие малополезные фичи, style может пригодиться разве что в нестандартных нумерованных списках; inline-size, могу только в теории представить, что может быть полезно в разного рода wysiwyg-ах.

HTML / DOM

inert — атрибут для отключения элементов от взаимодействия и accessibility tree. Элементы не получают фокус и не реагируют на клики.

<div inert>
  <button>Неактивная кнопка</button>
</div>

Мнение: 3 из 5, мощная и простая фича, хороший юзкейс для ограничения пределов фокуса при показе модальных окон: модалка работает, body под ней за inert-ом.