Новые возможности CSS в 2025 году: обзор ключевых изменений

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

Значение balance для свойства text-wrap

Типографика всегда была одной из самых сложных задач для веб-разработчиков. Одной из распространённых проблем является неравномерное распределение текста в заголовках, особенно на разных устройствах. Например, при отображении длинных заголовков часто возникает ситуация, когда последнее слово остаётся на отдельной строке, что ухудшает визуальное восприятие.

Для решения этой проблемы теперь доступно значение balance для свойства text-wrap. Оно позволяет равномерно распределить текст между строками, минимизируя вероятность появления одиночных слов в строке. Пример использования:

h1 {
  text-wrap: balance;
}

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

Пример использования свойства:

Потестировать код на отдельной странице

Нативная CSS-вложенность

Долгое время разработчики использовали препроцессоры, такие как SASS или LESS, для вложенности CSS-правил. Однако в 2025 году в CSS появилась нативная поддержка вложенности. Теперь можно писать код в таком стиле:

.awesome-block {
  border: 2px solid lightblue;
  padding: 1rem;
   
  &:hover {
    background-color: tomato;
  }
}

Этот синтаксис позволяет упростить структуру стилей и сделать код более читаемым. Однако стоит учитывать, что использование амперсанда (&) в названиях классов может привести к ошибкам, поэтому рекомендуется соблюдать осторожность.

Псевдо-классы :user-valid и :user-invalid

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

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

input:user-invalid {
  box-shadow: 0 0 10px red;
}

input:user-valid {
  box-shadow: 0 0 10px green;
}

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

Потестировать код на отдельной странице

Важно отметить! Псевдо-классы :user-valid и :user-invalid пока не поддерживаются большинством браузеров. Поэтому стили могут применяться сразу при загрузке страницы (как у :valid и :invalid). Чтобы избежать этого, можно использовать :focus, :focus-within или добавить обработчик через JavaScript.

Свойство scrollbar-gutter

Одной из частых проблем при работе с модальными окнами является «прыжок» контента, вызванный появлением или исчезновением полосы прокрутки. Новое свойство scrollbar-gutter позволяет заранее зарезервировать место для полосы прокрутки, что предотвращает смещение контента.

Пример:

html,
body {
  scrollbar-gutter: stable;
}

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

Математическая функция round()

В CSS появилась возможность округлять значения с помощью функции round(). Это особенно полезно при работе с нецелыми числами, которые могут возникать при вёрстке. Например:

.box {
  margin: round(to-zero, 1.25rem, 1px);
}

Функция round() может быть использована в сочетании с calc(), что делает её мощным инструментом для точного контроля над размерами и отступами.

Ключевые слова safe и unsafe

При использовании свойств align-items и justify-content может возникнуть ситуация, когда элементы обрезаются из-за переполнения контейнера. Новые ключевые слова safe и unsafe позволяют контролировать это поведение. Например:

.parent {
  align-items: safe center;
}

Ключевое слово safe гарантирует, что элементы не будут обрезаны в начале контейнера, что особенно важно для адаптивных интерфейсов.

Свойство align-content без необходимости использования флексбоксов

Раньше для использования свойства align-content требовалось задавать значение flex, inline-flex, grid или inline-grid для свойства display. Теперь align-content может работать самостоятельно, что упрощает центрирование элементов по вертикали. Пример:

.container {
  height: 10rem;
  background-color: lightblue;
  align-content: center;
}

Стандартный способ выравнивания блока по вертикали вместе со свойством display: flex:

Потестировать код на отдельной странице

И пример как можно выравнивать блок по вертикали при помощи align-content:

Потестировать код на отдельной странице

Здесь только стоит отметить, что блоки внутри контейнера не располагаются в одну линию, но тем не менее выравниваются по вертикали. Чтобы выровнять элементы items достаточно применить float: left;.

Важно отметить! Это свойство на данный момент может не работать в мобильных браузерах. Следует использовать метод с параметром display:flex.

Заключение

В 2025 году CSS продолжает развиваться, предлагая разработчикам новые инструменты для создания более гибких и адаптивных интерфейсов. Среди наиболее полезных нововведений можно выделить:

• Значение balance для свойства text-wrap;
• Нативную CSS-вложенность;
• Псевдо-классы :user-valid и :user-invalid;
• Свойство scrollbar-gutter;
• Математическую функцию round().

Эти изменения не только упрощают процесс разработки, но и открывают новые возможности для создания более качественных пользовательских интерфейсов. Рекомендуется обратить внимание на эти функции и начать их использование в своих проектах.

Есть и другие дополнительные свойства, о которых можно упомянуть:

• единица измерения cap, основанная на высоте заглавных букв;
• свойство content-visibility, которое помогает ускорить рендеринг страницы;
• transition-behavior, позволяющее анимировать элемент, даже если изменяется его display;
• математические функции rem() и mod().

Эти и другие новые CSS свойства и функции можно обсудить на странице обсуждения.

См. также

• CSS в 2024 году: новые тенденции