Google I/O 2025: What's new in web UI
20-21 мая прошла ежегодная конференция Google I/O. Уна Кравец выступила с презентацией «что нового в мире Web UI» в рамках трека, посвящённого вебу. На примере трёх интерфейсных паттернов она рассказала о множестве новых функций:
- Popover
- closedby
- Invoker commands
- Anchor positioning
- Customizable
- scrollbar-width
- ::scroll-button
- ::scroll-marker
- Typed attr()
- scroll-state()
- Scroll-driven animations
- popover=hint
- Interest commands
- scroll-snap-align
- scroll-snap-type
Первый паттерн — список выбора опций, он же . Теперь его можно стилизовать. Выпадающий список опций реализован как popover — отображаемый в верхнем слое элемент, переключаемый связанной с ним кнопкой. Для позиционирования выпадающего списка относительно кнопки используется Anchor positioning.
Наряду с popover был доработан похожий элемент — . Атрибут closedby определяет способ закрытия, в том числе добавляет закрытие при нажатии вне диалога. Благодаря Invoker Commands открывать и закрывать диалог в модальном и немодальном режимах можно декларативно с помощью кнопок.
Следующий паттерн — карусели, которые можно создавать через CSS. В основе лежит прокрутка с привязкой. Полоса прокрутки скрывается свойством scrollbar-width: none. Псевдо-элемент ::scroll-button() добавляет кнопки «вперёд»/«назад», свойство scroll-marker-group добавляет контейнер для маркеров, который стилизуется через ::scroll-marker-group, а сами маркеры добавляются через ::scroll-marker.
Доработанная функция attr() открывает возможности передачи данных из HTML-атрибутов в CSS-свойства с приведением их к нужному типу и резервным значением. Функция scroll-state() используется в Container Queries и позволяет определить, зафиксирован ли sticky-элемент, находится ли элемент в точке привязки или есть ли возможность прокрутки.
Так как карусели работают на основе прокрутки, Scroll-driven animations отлично их дополняют. С ними можно реализовать различные эффекты при прокрутке слайдов. Отключать неактивные слайды в CSS можно свойством interactivity: inert, аналогом атрибута inert.
Завершает презентацию паттерн hover card, когда при наведении на какой-то элемент всплывает карточка с дополнительным контентом. Новый атрибут interesttarget работает по аналогии с popovertarget, но показывает связанный popover по наведению указателя, долгому тапу на тач-устройствах или фокусу вместо нажатия.
CSS-свойство interest-target-delay задаёт задержку перед отображением и скрытием. Псевдо-класс :has-interest работает как :hover, но учитывает задержку. Новое значение popover="hint" меняет поведение popover для более удобного создания всплывающих по наведению элементов.
Количество новых функций для UI-разработки поражает, но и вызывает вопросы. Есть риск получить сырые функции со сломанной доступностью, непроработанными API и багами. Но об этом в одном из ближайших постов. Тем не менее, новинки выглядят круто и всё больше и больше паттернов закрывается встроенными возможностями HTML и CSS.
#html #css #ui
20-21 мая прошла ежегодная конференция Google I/O. Уна Кравец выступила с презентацией «что нового в мире Web UI» в рамках трека, посвящённого вебу. На примере трёх интерфейсных паттернов она рассказала о множестве новых функций:
- Popover
- closedby
- Invoker commands
- Anchor positioning
- Customizable
- scrollbar-width
- ::scroll-button
- ::scroll-marker
- Typed attr()
- scroll-state()
- Scroll-driven animations
- popover=hint
- Interest commands
- scroll-snap-align
- scroll-snap-type
Первый паттерн — список выбора опций, он же . Теперь его можно стилизовать. Выпадающий список опций реализован как popover — отображаемый в верхнем слое элемент, переключаемый связанной с ним кнопкой. Для позиционирования выпадающего списка относительно кнопки используется Anchor positioning.
Наряду с popover был доработан похожий элемент — . Атрибут closedby определяет способ закрытия, в том числе добавляет закрытие при нажатии вне диалога. Благодаря Invoker Commands открывать и закрывать диалог в модальном и немодальном режимах можно декларативно с помощью кнопок.
Следующий паттерн — карусели, которые можно создавать через CSS. В основе лежит прокрутка с привязкой. Полоса прокрутки скрывается свойством scrollbar-width: none. Псевдо-элемент ::scroll-button() добавляет кнопки «вперёд»/«назад», свойство scroll-marker-group добавляет контейнер для маркеров, который стилизуется через ::scroll-marker-group, а сами маркеры добавляются через ::scroll-marker.
Доработанная функция attr() открывает возможности передачи данных из HTML-атрибутов в CSS-свойства с приведением их к нужному типу и резервным значением. Функция scroll-state() используется в Container Queries и позволяет определить, зафиксирован ли sticky-элемент, находится ли элемент в точке привязки или есть ли возможность прокрутки.
Так как карусели работают на основе прокрутки, Scroll-driven animations отлично их дополняют. С ними можно реализовать различные эффекты при прокрутке слайдов. Отключать неактивные слайды в CSS можно свойством interactivity: inert, аналогом атрибута inert.
Завершает презентацию паттерн hover card, когда при наведении на какой-то элемент всплывает карточка с дополнительным контентом. Новый атрибут interesttarget работает по аналогии с popovertarget, но показывает связанный popover по наведению указателя, долгому тапу на тач-устройствах или фокусу вместо нажатия.
CSS-свойство interest-target-delay задаёт задержку перед отображением и скрытием. Псевдо-класс :has-interest работает как :hover, но учитывает задержку. Новое значение popover="hint" меняет поведение popover для более удобного создания всплывающих по наведению элементов.
Количество новых функций для UI-разработки поражает, но и вызывает вопросы. Есть риск получить сырые функции со сломанной доступностью, непроработанными API и багами. Но об этом в одном из ближайших постов. Тем не менее, новинки выглядят круто и всё больше и больше паттернов закрывается встроенными возможностями HTML и CSS.
#html #css #ui