CSS3 – новые фичи

Scrollbar-Gutter

Традиционно полоса прокрутки занимает пространство внутри элемента, уменьшая видимую область контента. Однако с появлением свойства scrollbar-gutter появилась возможность резервировать дополнительное пространство для полосы прокрутки вне области просмотра. Это позволяет избежать скачков элементов страницы при появлении/скрытии скролла, делая интерфейс визуально стабильнее.

body {
  scrollbar-gutter: stable both-edges;
}

Значение stable гарантирует, что размер видимой области останется неизменным независимо от появления полосы прокрутки. Значение both-edges добавляет свободное пространство как слева, так и справа.

:User-InValid/:User-Valid

Новые псевдоклассы позволяют точно определять состояние поля ввода формы. Например, если введённые пользователем данные соответствуют установленным требованиям валидности, применяется класс :user-valid, иначе используется :user-invalid. Таким образом, дизайнерские решения могут стать динамичными и интуитивными, улучшая UX пользователей.

<input type="email" required />

input:user-invalid {
  border-color: red;
}

input:user-valid {
  border-color: green;
}

Теперь поле мгновенно реагирует на вводимые символы и сигнализирует пользователю о необходимости исправить ошибку или подтверждает правильность введённых данных.

Round

Свойство border-radius известно давно, но теперь оно расширено функцией округления углов с использованием единицы измерения round. Эта единица задаёт радиус закругления в зависимости от ширины блока, обеспечивая пропорциональные углы независимо от размеров контейнера.

Например:

div {
  width: 200px;
  height: 100px;
  background-color: #ccc;
  border-radius: 50% round;
}

Таким образом, круглая форма объекта автоматически адаптируется к изменениям размера, избегая проблем масштабирования.

Align-Content

Обычное свойство выравнивания содержимого (justify-content) применимо только к одному направлению (строке или столбцу). Но иногда возникает потребность выровнять элементы одновременно по вертикали и горизонтали. Для этого существует новое свойство align-content.

.container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-content: stretch;
}

Благодаря этому свойству содержимое размещается равномерно по всему контейнеру, заполняя пустые пространства между элементами.

Content-Visibility

Оптимизация производительности является важным аспектом современного веб-разработки. Свойство content-visibility помогает браузеру эффективно рендерить страницу, загружая визуальное представление элементов постепенно. Это особенно полезно для длинных списков или сложных макетов.

Использование:

article {
  content-visibility: auto;
}

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

Transition-Behavior

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

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

button {
  transition-duration: .3s;
  transition-timing-function: ease-out;
  transition-behavior: smooth-step-end;
}

Здесь smooth-step-end означает, что скорость изменения плавно возрастает и затем резко снижается ближе к концу анимации.

Математические Функции Rem() и Mod()

Помимо традиционных единиц измерения CSS теперь поддерживает встроенные математические операции. Функция rem() возвращает остаток от деления чисел, позволяя реализовать адаптивные вычисления прямо в коде стилей.

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

.element {
  margin-left: calc(rem(100 / 7));
}

Аналогично, функция mod() вычисляет модуль числа, что удобно для циклического повторения паттернов или распределения колонок.

.grid-item:nth-child(mod(3)) {
  color: blue;
}

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

Заключение

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