CSS Боль on Telegram: “Что нового Baseline Widely Available, часть 1 В…”

Что нового Baseline Widely Available, часть 1

В прошлом году (+ в январе 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-высотой в вёрстке на мобилках, то в следующий раз присмотритесь к этим значениям.

продолжение следует...

#Пульс_веб_платформы

@web_platform | Поддержать платформу ⭐️