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

Una Kravets

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

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

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

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

Настраиваемые избранные меню

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

API Popover: теперь в базовой версии

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

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

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

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

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

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

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

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

Позиционирование якоря CSS

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

Начиная с Chrome 125, вы можете использовать API позиционирования якорей CSS. Эта новая возможность декларативно привязывает один элемент к другому, автоматически изменяя его положение при приближении к краю экрана. Эта функция является частью 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>

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

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

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

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

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

Карусели

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

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

Чтобы создать карусель, сначала нужно создать список элементов, выходящий за пределы контейнера. Чтобы скрыть горизонтальную полосу прокрутки, сохранив при этом возможность прокручивать содержимое, используйте 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() в операторе @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-запросы состояния прокрутки
• Объяснитель для вызывающих интерес