20-21 мая прошла ежегодная конференция Google I/O. Уна Кравец выступила с презентацией «что нового в мире Web UI» в рамках трека, посвящённого вебу. На примере трёх интерфейсных паттернов она рассказала о множестве новых функций:
- Popover
-
closedby- Invoker commands
- Anchor positioning
- Customizable
<select>-
scrollbar-width-
::scroll-button-
::scroll-marker- Typed
attr()-
scroll-state()- Scroll-driven animations
-
popover=hint- Interest commands
-
scroll-snap-align-
scroll-snap-typeПервый паттерн — список выбора опций, он же
<select>. Теперь его можно стилизовать. Выпадающий список опций реализован как popover — отображаемый в верхнем слое элемент, переключаемый связанной с ним кнопкой. Для позиционирования выпадающего списка относительно кнопки используется Anchor positioning.Наряду с popover был доработан похожий элемент —
<dialog>. Атрибут 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