Как и в прошлом году, команда Chrome DevRel презентовала лэндинг CSS Wrapped 2025. На нём собрано 17 новых функций CSS и UI, которые внедрены в течении 2025 года. Функции разделены на три группы и снабжены примерами.
Кастомизируемые компоненты
Invoker Commands. Декларативный способ управления отображением
<dialog> и popover без JS. Также можно создавать собственные команды и вызывать событие command.Атрибут closedby. Управляет закрытием
<dialog>: только через JS или по нажатию Esc, жесту «назад» и аналогичным действиям или всё перечисленное плюс нажатие вне элемента.Эвфемерные поповеры. Значение
popover="hint" создаёт новый тип поповеров. Их можно вкладывать внутрь других поповеров и их появление не будет закрывать ранее открытые поповеры.Стилизуемый <select>. Для
<select> можно включить базовый режим, который отключает отрисовку системного элемента и делает его полностью стилизуемым.CSS-карусели. Встроенный в CSS способ создавать карусели с кнопками «вперёд»/«назад» и маркерами. Есть ряд проблем, но они решаются.
Якорные контейнерные запросы. Стилизация элементов на основе положения связанного якоря из Anchor Positioning API.
Interest Invokers. Развитие Invoker Commands с вызовом команд по наведению указателя, фокусу и долгому тапу на тач-экранах.
Интерактивность нового поколения
Запросы состояния прокрутки. Контейнерные запросы для проверки наличия прокрутки, привязки элемента к точкам привязки или sticky-элемента.
Функции подсчёта элементов в дереве. Функция
sibling-count() возвращает количество дочерних элементов. sibling-index() возвращает порядковый номер элемента внутри родителя.scrollIntoView() для ближайшего контейнера. Дополнительный параметр container: 'nearest' для метода scrollIntoView() избавляет от некоторых багов с прокруткой.Вложенные группы View Transition. Возможность вкладывать псевдо-элементы
::view-transition-group друг в друга для эмуляции 3D-переходов.Перемещение элементов с сохранением состояния. Метод
moveBefore() перемещает элемент по DOM-дереву с сохранением состояния. Полезно для <video> и <iframe>.Улучшенная эргономика
Расширение attr(). Функция
attr() расширена для работы с типами данных, чтения любых атрибутов и установки резервного значения.ToggleEvent.source. Событию ToggleEvent добавлено свойство source с элементом, который стал источником вызова события.Обрезка текста. Свойства
text-box-trim, text-box-edge и сокращённое text-box позволяют обрезать лишнее пространство текстовых узлов для лучшего выравнивания.Функция
shape(). Описывает в похожем на SVG синтаксисе сложные фигуры, которые можно использовать как маски.Оператор if(). С помощью
if() можно задавать значения свойств на основе медиа и контейнерных запросов, значений пользовательских свойств или поддержки функций в браузере.Пользовательские функции. Возможность определения пользовательских функций с помощью директивы
@function, которые могут принимать параметры и должны возвращать какое-то значение.Расширенный синтаксис диапазонов.
if() и style() только появились, а им уже добавили возможность проверки значений с помощью операторов <, >, <= и >=.Ключевое слово
stretch. Новое значение свойств width и height. Оно позволяет элементу растягиваться на размеры содержащего блога, чего сейчас не добиться значениями auto, 100% и 100v*.Свойство
corner-shape. Предназначено для создания углов сложной формы, включая внутренние углы и вырезы в духе negative border radius.Более подробно о каждой функции смотрите на лендинге: там есть демонстрации, примеры кода, видео, браузерная поддержка, статус Baseline и ссылки на дополнительные материалы. Ещё один крутой год для CSS и UI.
#html #css #ui
