Что нового в веб-интерфейсе: обзор конференции I/O 2025

Una Kravets

Опубликовано: 14 августа 2025 г.

Поскольку сезон мероприятий Google I/O подходит к концу, в этом посте мы подводим итоги основных моментов, касающихся CSS и веб-интерфейсов, представленных на наших мероприятиях в этом году.

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

Команда Chrome в сотрудничестве с другими производителями браузеров, организациями по стандартизации, такими как CSSWG и WHATWG, и группами сообщества, такими как Open UI, сосредоточена на том, чтобы сделать эти фундаментальные шаблоны пользовательского интерфейса действительно простыми в реализации.

Настраиваемые выпадающие меню

Элемент <select> необходим для форм, но его внутренняя структура исторически была скрыта браузером, что делало практически невозможным согласованное и всеобъемлющее оформление с помощью CSS. Для создания более совершенного элемента <select> необходимо понимать его основные составляющие — API всплывающих окон и API позиционирования якорей CSS.

API для всплывающих окон: теперь в базовой версии.

Для пользовательского выпадающего списка требуется плавающий блок с вариантами выбора, который отображается поверх всех остальных элементов пользовательского интерфейса, легко закрывается и корректно управляет фокусом. API Popover справляется со всем этим, и с этого года он получил статус «Базовый новый доступ», что означает его стабильную работу во всех основных браузерах.

Для создания всплывающего окна необходимы две части: элемент-триггер (например <button> ) и сам элемент всплывающего окна. Соедините их, присвоив всплывающему окну id и атрибут [popover] , а затем укажите этот id в атрибуте [popovertarget] кнопки.

API всплывающих окон управляет всем жизненным циклом элемента, предоставляя следующие возможности:

• Рендеринг верхнего слоя : больше никаких проблем с z-индексом.
• Дополнительная функция автоматического закрытия всплывающего окна : окно закрывается, когда пользователь щелкает за пределами области всплывающего окна.
• Автоматическое управление фокусом : браузер обрабатывает навигацию по вкладкам при входе и выходе из всплывающего окна.
• Доступные привязки : базовая модель взаимодействия обрабатывается нативно.

Элемент <dialog> получает обновление.

Хотя всплывающие окна обладают мощными возможностями, они не всегда являются правильным выбором. Например, в ситуациях, когда требуется обратная связь от пользователя и страница блокирует взаимодействие, более уместным будет модальное <dialog> .

Исторически сложилось так, что <dialog> не обладал некоторыми удобствами [popover] , но это меняется. Благодаря новому атрибуту closedby="any" , модальные диалоги теперь поддерживают функцию легкого закрытия, закрываясь при щелчке пользователя за пределами окна или нажатии клавиши Escape.

Кроме того, вызывающие команды ( [command] и [commandfor] ) предоставляют декларативный способ, не требующий JavaScript, связать кнопку с действием, например, открытием диалогового окна с помощью command="show-modal" .

CSS-позиционирование якорей

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

Начиная с Chrome 125, вы можете использовать API позиционирования CSS Anchor. Эта новая возможность декларативно связывает один элемент с другим, автоматически обрабатывая изменение его положения, когда он приближается к краю экрана. Эта функция является частью Interop 2025 , кроссбраузерной инициативы по внедрению наиболее востребованных функций, а это значит, что мы можем ожидать ее появления во всех основных браузерах к концу 2025 года.

Хотя вы можете явно связывать элементы с помощью свойств anchor-name и position-anchor , обновление спецификации и в Chrome 133 создает неявную связь привязки между всплывающим окном <popover> и вызываемой им <button> . Это значительно упрощает код и означает, что теперь вы можете позиционировать всплывающее окно одной строкой CSS, например: position-area: bottom span-left .

Инструмент "Якорь" от chrome.dev показывает, как использовать position-area для получения желаемого расположения элемента:

Пойдите ещё дальше и позвольте браузеру перепозиционировать ваши ссылки, предотвращая их выход за пределы экрана, определив резервные варианты с помощью position-try-fallbacks . В следующем примере показано всплывающее окно, использующее это свойство для встроенной логики перепозиционирования:

Полностью настраиваемый <select>

Благодаря этим базовым элементам, заложенным в более ранних версиях, в Chrome 134 наконец-то появилась веб-ориентированная стилизация для элементов <select> . Она включает в себя новое свойство appearance , новые псевдоэлементы и элемент <selectedcontent> .

Чтобы разблокировать возможности настройки, примените свойство appearance: base-select; к элементу <select> и его новому псевдоэлементу ::picker(select) , который нацелен на выпадающий список вариантов. Это откроет доступ к новым внутренним элементам для стилизации, включая:

• <selectedcontent> : Отображает содержимое выбранного варианта, отображаемого на кнопке.
• ::picker-icon : Значок стрелки выпадающего списка
• <option>:checked and ::checkmark : Для оформления выбранного параметра и его индикатора галочки

Это позволяет отображать богатый контент в параметрах и осуществлять точный контроль над отображением. Например, вы можете показывать значок и подзаголовок в списке параметров, но скрывать их в закрытом состоянии, используя display: none в selectedcontent .

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

Карусели

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

Начало работы со скроллерами

Для создания карусели необходимо начать со списка элементов, которые выходят за пределы своего контейнера. Чтобы скрыть горизонтальную полосу прокрутки, сохранив при этом возможность прокрутки содержимого, используйте scrollbar-width: none . Кроме того, чтобы прокрутка ощущалась "быстрой", примените scroll-snap-type и scroll-snap-align , которые гарантируют, что элементы будут автоматически фиксироваться на своих местах при прокрутке пользователем.

Предыдущая и следующая ссылки с помощью ::scroll-button

Новый псевдоэлемент ::scroll-button() , появившийся в Chrome 135, указывает браузеру генерировать доступные кнопки «далее» и «назад» с сохранением состояния. Браузер автоматически обрабатывает правильные роли ARIA, порядок перехода по вкладкам и даже отключает кнопки при достижении начала или конца — и всё это без добавления JavaScript.

Чтобы активировать кнопки прокрутки, укажите им содержимое и доступную метку, например, так:

.carousel {

  &::scroll-button(left) {
    content: "⬅" / "Scroll Previous";
  }
  
  &::scroll-button(right) {
    content: "⮕" / "Scroll Next";
  }
}

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

Прямая навигация с помощью ::scroll-marker

Для точечных индикаторов или миниатюр псевдоэлементы ::scroll-marker и ::scroll-marker-group напрямую связывают маркеры навигации с элементами в контейнере прокрутки. Браузер рассматривает группу как tablist и обрабатывает навигацию с помощью клавиатуры.

Аналогично кнопкам прокрутки, инициализируйте маркеры прокрутки, выбрав соответствующий параметр в свойстве content , и укажите доступную метку. В следующем примере для установки метки для маркера прокрутки используется атрибут data. Кроме того, расположите маркеры прокрутки в ::scroll-marker-group используя свойство scroll-marker-group . Наконец, стилизуйте активный маркер, используя новый псевдокласс :target-current . Вот пример того, как это может выглядеть для простой карусели:

.carousel {
  scroll-marker-group: after;
  
  > li::scroll-marker {
    content: ''/ attr(data-name);
  }

  > li::scroll-marker:target-current {
    background: blue;
  }
}

Запросы состояния прокрутки

Новые возможности CSS, связанные с прокруткой, позволяют создавать более динамичные и интерактивные карусели. Запрос scroll-state — это новый медиа-запрос, который применяется в зависимости от состояния скроллера. Существует три различных типа запросов scroll-state, к которым можно получить доступ с помощью scroll-state() в операторе @container . Это:

• scroll-state(snapped) : Определяет состояние элемента, когда он находится в "закрепленном" положении. В каруселях это означает, что элемент закреплен в центре карусели.
• scroll-state(stuck) : Стиль элемента, например заголовка, когда его родительский элемент становится "липким".
• scroll-state(scrollable) : Добавляет визуальные индикаторы, например, эффект затухания, чтобы показать, что есть еще контент, к которому можно прокрутить.

Подводя итог всему сказанному,

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

Эта интерактивная карусель сочетает в себе запросы scroll-state() , ::scroll-button , ::scroll-marker , позиционирование привязки CSS и :target-current .

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

Узнайте больше о каруселях CSS .

Интерактивные всплывающие подсказки

Всплывающие окна с всплывающими подсказками (hovercards), которые появляются при наведении курсора мыши на имя пользователя или ссылку, невероятно полезны, но их правильная разработка, как известно, представляет собой сложную задачу. Настройка задержек, обработки событий и поддержки нескольких устройств может занять у целой команды несколько месяцев. Но мы работаем над новым декларативным решением, которое должно раз и навсегда решить эту проблему.

Всплывающие окна, активируемые интересом, с помощью [interestfor]

Основная магия декларативных всплывающих подсказок заключается в атрибуте [interestfor] . Эта новая функция расширяет возможности всплывающих окон, но запускает их в зависимости от «интереса» пользователя. Например, интерес пользователя на устройстве с указателем будет выражаться во наведении указателя, навигации по вкладкам с помощью клавиатуры или длительном нажатии или касании на сенсорном экране. Взаимодействие с мобильными устройствами пока не решено.

Чтобы преобразовать всплывающее окно, срабатывающее по клику, в всплывающее окно, срабатывающее по интересам, создайте вызывающий элемент, которым может быть <button> или <a> , и присвойте ему атрибут [interestfor] , равный id элемента [popover] . В HTML это выглядит так:

<button interestfor="profile-callout">
  ...
</button>

<div id="profile-callout" popover>
 ...
</div>

Браузер обрабатывает всю сложную логику событий, включая:

• События входа и выхода: наведение курсора на устройствах с тонким указателем, навигация по вкладкам с помощью клавиатуры, длительное нажатие или касание на устройствах с грубым указателем.
• Задержки событий: Управляйте задержками входа и выхода с помощью одного свойства CSS.

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

Стилизация, вызывающая интерес

Элементы, инициирующие интерес, получили ряд новых возможностей. Одна из них — возможность управлять задержками входа и выхода с помощью свойства CSS: interest-target-delay . Другая — возможность стилизовать инициирующий элемент в зависимости от того, есть ли у него интерес или нет, используя псевдокласс :has-interest .

[interesttarget] {
  interest-target-delay: 0s 1s;

  &:has-interest {
    background: yellow;
  }
}

popover="hint" и многофункциональный пользовательский интерфейс

Ключевым элементом для тех, кто хочет привлечь внимание, является новый тип всплывающих окон: popover="hint" . Главное отличие от других всплывающих окон заключается в том, что всплывающее окно с подсказкой не закрывает другие всплывающие окна при открытии. Это идеально подходит для всплывающих подсказок или карточек предварительного просмотра, которые должны появляться, не закрывая уже открытое меню или окно чата.

Это позволяет декларативно создавать мощные многофункциональные пользовательские интерфейсы. Теперь одна кнопка может иметь автоматическое всплывающее окно с использованием popovertarget для основного действия клика (например, открытия панели уведомлений) и всплывающее окно с подсказкой, вызываемой интересом, для отображения полезной всплывающей подсказки при наведении указателя мыши.

Будущее — это декларативное утверждение.

Описанные здесь функции представляют собой фундаментальный сдвиг в сторону более мощной и декларативной веб-платформы. Позволяя браузеру обрабатывать сложную, повторяющуюся работу по управлению состоянием и доступностью, мы можем избавиться от огромного количества JavaScript, улучшить производительность и сосредоточиться на том, что у нас получается лучше всего: создании инновационных и привлекательных пользовательских интерфейсов. Это поистине золотой век для веб-интерфейсов, и он только начинается. Следите за обновлениями здесь, пока мы работаем над созданием более мощного и простого в использовании веб-пространства.

Дополнительные ресурсы:

• API всплывающих окон
• Позиционирование якоря
• Инструмент "Якорь"
• Вызывающие команды
• Настраиваемые выпадающие меню (RFC)
• CSS-карусели
• CSS Карусельная галерея
• Конфигуратор CSS-карусели
• CSS-запросы прокрутки состояния
• Объяснение механизмов привлечения процентов