20 современных возможностей CSS, которые стоит знать веб-разработчику

За последние пять лет CSS получил множество возможностей, которые раньше требовали JavaScript, препроцессоров или сложных обходных решений. Собрали 20 полезных нововведений с короткими примерами и практическим применением.

1. Самые полезные возможности CSS

1. :has() — выбор родителя по содержимому

Псевдокласс :has() позволяет стилизовать элемент в зависимости от вложенных элементов и их состояния.

/* Карточка с изображением */
.card:has(img) {
  padding: 20px;
}

/* Форма с невалидным полем */
.form:has(input:invalid) {
  border-color: red;
}

Где полезно: карточки, формы, меню и другие элементы с динамическим содержимым.

2. @container — адаптивность относительно контейнера

Контейнерные запросы позволяют изменять оформление компонента по ширине родительского блока, а не всего экрана.

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

@container (max-width: 400px) {
  .card {
    flex-direction: column;
  }
}

Где полезно: универсальные карточки, которые одинаково хорошо работают в каталоге, сайдбаре и других областях сайта.

3. CSS Nesting — вложенность без SCSS

Обычный CSS теперь поддерживает вложенные правила. Для базовой вложенности больше не нужен препроцессор.

.card {
  padding: 20px;

  &:hover {
    background: #eee;
  }

  .title {
    font-size: 24px;
  }

  @media (max-width: 768px) {
    padding: 10px;
  }
}

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

4. subgrid — общая сетка вложенных элементов

Значение subgrid позволяет дочерней сетке использовать линии сетки родителя.

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
}

Где полезно: выравнивание заголовков, описаний и кнопок в карточках с разным количеством текста.

5. @layer — управление приоритетом стилей

Каскадные слои позволяют задавать порядок приоритетов между группами CSS-правил.

@layer reset, base, components;

@layer base {
  button {
    background: gray;
  }
}

@layer components {
  .button {
    background: blue;
  }
}

Где полезно: большие проекты, библиотеки компонентов, оформление CMS и управление переопределениями.

6. clamp() — адаптивные размеры без медиазапросов

Функция clamp() ограничивает динамическое значение минимальным и максимальным пределами.

h1 {
  font-size: clamp(24px, 4vw, 64px);
}

.container {
  padding: clamp(15px, 3vw, 50px);
}

Где полезно: адаптивная типографика, отступы и размеры элементов. Функция появилась раньше рассматриваемого периода, но за последние годы стала особенно востребованной.

7. dvh, svh, lvh — новые единицы высоты

Новые единицы измерения решают проблемы с высотой экрана на мобильных устройствах, где адресная строка браузера может появляться и скрываться.

.hero {
  min-height: 100dvh;
}

• dvh — динамическая высота области просмотра.
• svh — минимальная высота с учётом интерфейса браузера.
• lvh — максимальная высота области просмотра.

Где полезно: полноэкранные секции, мобильные меню и модальные окна.

8. color-mix() — смешивание цветов

Функция color-mix() смешивает цвета непосредственно в CSS. Можно создавать оттенки без SCSS и JavaScript.

.button {
  background: #02b2c3;

  &:hover {
    background: color-mix(
      in srgb,
      #02b2c3 80%,
      black
    );
  }
}

Где полезно: состояния кнопок, цветовые темы, создание дополнительных оттенков основного цвета.

9. text-wrap: balance и pretty — красивые переносы

Новые значения text-wrap улучшают распределение текста по строкам.

h1, h2 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

balance старается уравновешивать длину строк, а pretty помогает избегать неудачных переносов.

Где полезно: заголовки, карточки, статьи и текстовые блоки.

10. @scope — ограничение области действия стилей

Правило @scope ограничивает действие CSS определённой частью документа.

@scope (.article) {
  h2 {
    color: blue;
  }

  p {
    line-height: 1.7;
  }
}

Где полезно: независимые компоненты, стили статей и предотвращение конфликтов между разными блоками сайта.

2. Анимации и интерактивность без JavaScript

11. Scroll-driven Animations — анимация при прокрутке

CSS-анимации теперь могут зависеть от положения прокрутки, а не только от времени.

.progress {
  transform-origin: left;
  animation: progress linear;
  animation-timeline: scroll();
}

@keyframes progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

Где полезно: индикаторы прочтения статьи, эффекты прокрутки и анимированные элементы интерфейса.

12. @starting-style — анимация появления

Позволяет задавать стартовые значения CSS-свойств для элементов, которые только появились на странице.

.notification {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .3s, transform .3s;

  @starting-style {
    opacity: 0;
    transform: translateY(15px);
  }
}

Где полезно: уведомления, модальные окна и динамически добавляемые элементы.

13. transition-behavior: allow-discrete — переходы дискретных свойств

Позволяет включать дискретные свойства, например display, в CSS-переходы.

.popup {
  display: none;
  opacity: 0;
  transition:
    opacity .3s,
    display .3s allow-discrete;
}

.popup.open {
  display: block;
  opacity: 1;
}

@starting-style {
  .popup.open {
    opacity: 0;
  }
}

Где полезно: плавное появление и исчезновение выпадающих блоков без переключения видимости через таймеры JavaScript.

14. interpolate-size — анимация height: auto

Позволяет анимировать изменение размеров между фиксированным значением и размером, определяемым содержимым.

:root {
  interpolate-size: allow-keywords;
}

.accordion {
  height: 0;
  overflow: hidden;
  transition: height .3s;
}

.accordion.open {
  height: auto;
}

Где полезно: аккордеоны, FAQ, раскрывающиеся списки и блоки с неизвестной высотой.

15. View Transitions — плавная смена страниц

View Transitions позволяет создавать анимированные переходы между страницами сайта. Для переходов между документами одного источника достаточно CSS.

@view-transition {
  navigation: auto;
}

Правило необходимо подключить на обеих страницах. Для более сложных анимаций доступны специальные псевдоэлементы.

Где полезно: переходы между разделами сайта, страницами каталога и карточками товаров.

3. Новинки CSS для дизайна и интерфейсов

16. CSS Anchor Positioning — привязка элементов

Позволяет позиционировать один элемент относительно другого без вычисления координат через JavaScript.

.button {
  anchor-name: --btn;
}

.tooltip {
  position: absolute;
  position-anchor: --btn;
  top: anchor(bottom);
  left: anchor(left);
}

Где полезно: всплывающие подсказки, выпадающие меню и другие элементы, привязанные к кнопкам.

17. @property — типизированные CSS-переменные

Обычные CSS-переменные можно регистрировать с определённым типом значения. Это позволяет корректно анимировать их изменение.

@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.box {
  --angle: 0deg;
  transform: rotate(var(--angle));
  transition: --angle .5s;
}

.box:hover {
  --angle: 180deg;
}

Где полезно: анимации, градиенты, пользовательские параметры оформления компонентов.

18. oklch() — современная цветовая модель

Цветовая функция oklch() задаёт цвет через воспринимаемую светлоту, насыщенность и оттенок.

:root {
  --primary: oklch(70% 0.15 200);
}

.button {
  background: var(--primary);
}

Где полезно: цветовые палитры, дизайн-системы и создание предсказуемых оттенков.

19. field-sizing: content — автоматическая высота полей

Позволяет полям формы автоматически подстраиваться под содержимое без дополнительного JavaScript.

textarea {
  field-sizing: content;
  min-height: 80px;
  max-height: 300px;
}

Где полезно: формы комментариев, чаты, обратная связь и текстовые редакторы.

20. corner-shape — новые формы углов

Свойство corner-shape расширяет возможности border-radius, позволяя управлять формой скруглённых углов.

.card {
  border-radius: 30px;
  corner-shape: squircle;
}

.button {
  border-radius: 12px;
  corner-shape: bevel;
}

Где полезно: нестандартные карточки, кнопки и декоративные элементы интерфейса.

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

Для повседневной разработки наибольшую практическую пользу принесут следующие инструменты:

Заключение

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

Не все перечисленные возможности одинаково хорошо поддерживаются браузерами. Перед внедрением в рабочий проект проверяйте совместимость через Can I Use или MDN Web Docs.