Что нового в веб-интерфейсе?

Брамус
Уна Кравец

Опубликовано: 1 июля 2026 г.

На конференции Google I/O 2026 мы представили целый ряд обновлений для веб-платформы пользовательского интерфейса. От учета предпочтений пользователей до реализации естественного взаимодействия, управления навигацией, уменьшения беспорядка и адаптации к различным форм-факторам — современный веб предлагает разработчикам невероятно мощные инструменты для создания высококачественного, тактильного пользовательского опыта.

Здесь представлен исчерпывающий обзор всех функций, упомянутых в сессии «Что нового в веб-интерфейсе», структурированный в соответствии с нашим основным набором принципов UX.

Часть 1: Уважайте предпочтения пользователей.

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

1. contrast-color()

Функция CSS contrast-color() принимает заданный цвет и автоматически возвращает либо black , либо white , в зависимости от того, какой из них имеет более высокий контраст с заданным цветом в соответствии с алгоритмом минимального контраста WCAG AA. Это обеспечивает читаемость без необходимости вручную подбирать пары цвет текста и фона.

Browser Support

  • Chrome: 147.
  • Край: 147.
  • Firefox: 146.
  • Сафари: 26.

Source

Узнайте больше о функции contrast-color()

2. light-dark()

Функция CSS ` light-dark() позволяет указать два разных значения (цвета или изображения) для свойства, одно для светлого режима, а другое для темного, в рамках одного объявления. Браузер автоматически выбирает правильный цвет контраста на основе активной color-scheme (которая должна быть установлена ​​на light , dark или light dark для :root или родительского элемента).

Browser Support

  • Chrome: 123.
  • Edge: 123.
  • Firefox: 120.
  • Сафари: 17.5.

Source

Нововведением в функции light-dark() является то, что она больше не ограничивается только значениями цвета. Начиная с Chrome 150, она теперь также принимает два значения изображения.

Browser Support

  • Chrome: за флагом.
  • Край: за флагом.
  • Firefox: 150.
  • Safari: не поддерживается.

3. Пользовательские функции CSS ( @function )

Правило @function позволяет определять пользовательские, многократно используемые функции непосредственно в нативных CSS-стилях. Оно может принимать в качестве аргументов локальные пользовательские свойства, выполнять вычисления и возвращать значения, используя дескриптор result , что снижает необходимость в препроцессорах.

Browser Support

  • Chrome: 139.
  • Край: 139.
  • Firefox: не поддерживается.
  • Safari: не поддерживается.

Source

В сочетании с запросами в стиле контейнера и функцией CSS if() вы можете создать пользовательскую функцию --light-dark() , которая работает с любым типом значения, как показано в этом примере:

4. Запросы в контейнерном стиле

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

Browser Support

  • Chrome: 111.
  • Край: 111.
  • Firefox: 151.
  • Сафари: 18.

В этой демонстрации для установки цветов на основе пользовательского свойства --theme используются запросы стиля. 

@container style(--theme: primary) {
  .app-card {
    --bg-light: #fdf2f8; 
    --bg-dark: #ff91d3;  
    --neon-glow: #f472b6;
    --btn-light: #be185d; 
    --btn-dark: #fbcfe8;  
    
    --text-on-light: #500732;
    --text-on-dark: #fff1f2;  
  }
}

@container style(--theme: accent) {
  .app-card {
    --bg-light: #f3e8ff;
    --bg-dark: #4c1d95;  
    --neon-glow: #d8b4fe;
    --btn-light: #7e22ce; 
    --btn-dark: #c084fc;  
    
    --text-on-light: #2e1065; 
    --text-on-dark: #faf5ff;  
  }
}

@container style(--theme: success) {
  /* … */
}

Узнайте больше о вопросах стиля.

5. Функция CSS if()

Функция CSS if() позволяет напрямую применять встроенную условную логику к значениям свойств CSS. Она оценивает ряд условий, разделенных точкой с запятой (запросы стилей, медиа-запросы или запросы функций), и позволяет устанавливать различные значения, связанные с первым истинным условием, с возможностью резервного варианта else .

Browser Support

  • Chrome: 137.
  • Edge: 137.
  • Firefox: не поддерживается.
  • Safari: не поддерживается.

Source

В предыдущем примере функция if() использовалась для создания тематического контрастного цвета на основе результата функции contrast-color() .

--contrast-color: contrast-color(var(--card-bg));
color: if(
    style(--contrast-color: white): var(--text-on-dark);
    else: var(--text-on-light)
);

6. @supports at-rule()

Функция CSS at-rule() , используемая с @supports позволяет разработчикам определять, распознает ли браузер конкретное правило at, например, @starting-style или @view-transition .

Например, чтобы проверить поддержку @function , используйте её следующим образом:

@supports at-rule(@function) {
  /* Code for browsers that support @function goes here */
}

Использование at-rule() позволяет проверять только базовую поддержку самого правила `at-rule` и не может использоваться для проверки наличия конкретных дескрипторов, прелюдий или полных блоков правил `at-rule`. Существуют обходные пути для обнаружения таких функций, как привязанные запросы или запросы стиля.

Узнайте больше о @supports at-rule

7. <meta name="text-scale">

Метатег HTML text-scale позволяет странице масштабировать начальный размер шрифта корневого элемента <html> пропорционально настройкам масштабирования текста на уровне операционной системы и браузера, что особенно важно для мобильных платформ.

Browser Support

  • Chrome: 146.
  • Край: 146.
  • Firefox: не поддерживается.
  • Safari: не поддерживается.

Source

При применении этого правила размер шрифта для html -элемента теперь определяется операционной системой, поэтому вам не нужно задавать базовый font-size . Если вы затем используете длины в относительных единицах, таких как em и rem , вычисленные значения в пикселях будут основаны на этом базовом размере шрифта.

<meta name="text=scale" value="scale">
<style>
html {
  /* Don't set a base font-size here! */
}
</style>

На вкладке «Рендеринг» в инструментах разработчика можно эмулировать предпочтительный размер шрифта. Используйте выпадающее меню, чтобы изменить значение.

Узнайте больше о <meta name=text-scale>

Часть 2: Реализация естественных взаимодействий

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

8. Функция сглаживания linear()

Функция сглаживания linear() позволяет создавать сложные, настраиваемые кривые перехода (например, отскоки, пружины или упругие перерегулирования) путем линейной интерполяции между неограниченным числом заданных точек прогресса.

Browser Support

  • Chrome: 113.
  • Край: 113.
  • Firefox: 112.
  • Сафари: 17.2.

Source

В приведенном ниже примере linear() используется для придания диалоговому окну естественного плавного перехода при его отображении или скрытии.

Узнайте больше о linear()

9. @starting-style

Правило CSS @starting-style определяет начальные значения свойств элемента, от которых должен происходить переход при первом отображении элемента в DOM или при изменении его display с none на `visible`, чтобы обеспечить плавные переходы при входе в элемент.

Browser Support

  • Chrome: 117.
  • Край: 117.
  • Firefox: 129.
  • Сафари: 17.5.

Source

В предыдущем примере это использовалось для анимации появления <dialog> в момент его первого отображения.

10. transition-behavior: allow-discrete

Свойство transition-behavior (часто используемое как allow-discrete в сокращенной записи transition ) позволяет изменять дискретные свойства, такие как display или overlay , гарантируя, что элементы останутся видимыми во время анимации выхода, прежде чем будут скрыты.

Browser Support

  • Chrome: 117.
  • Край: 117.
  • Firefox: 129.
  • Сафари: 17.4.

Source

11. sibling-index() и sibling-count()

Функции CSS sibling-index() и sibling-count() возвращают целые числа, представляющие позицию элемента (начиная с 1) среди его соседей и общее количество соседних элементов соответственно. Они идеально подходят для динамического расчета задержек анимации в CSS без использования JavaScript.

Browser Support

  • Chrome: 138.
  • Edge: 138.
  • Firefox: не поддерживается.
  • Safari: 26.2.

Source

Browser Support

  • Chrome: 138.
  • Edge: 138.
  • Firefox: не поддерживается.
  • Safari: 26.2.

Source

В этой демонстрации содержимое диалогового окна отображается с задержкой, используя атрибут sibling-index() в ` animation-delay

dialog[open] > * {
  animation:
    content-entry 0.6s var(--spring) forwards;
  
  /* 0.2s delay for the first item, then staggering by 0.05s via sibling-index()
  */
  animation-delay:
    calc(sibling-index() * 0.05s + 0.2s);
}

12. Закрытие диалогового окна (атрибут closedby )

Атрибут closedby элемента <dialog> (со значением any ) позволяет использовать декларативное поведение "легкого закрытия", автоматически закрывая модальные диалоги при щелчке вне их или нажатии клавиши ESC , без необходимости использования пользовательского JavaScript.

Browser Support

  • Chrome: 134.
  • Edge: 134.
  • Firefox: 141.
  • Safari: не поддерживается.

Source

Вы можете попробовать это в предыдущей демонстрации.

13. corner-shape

Экспериментальное сокращенное свойство corner-shape позволяет разработчикам изменять закругленные углы (из border-radius ) для создания пользовательских визуальных форм, таких как bevel , scoop , notch или squircle (с помощью superellipse() ). Границы, тени и контуры фокуса автоматически подстраиваются под форму.

Browser Support

  • Chrome: 139.
  • Край: 139.
  • Firefox: не поддерживается.
  • Safari: не поддерживается.

Source

Часть 3: Обеспечение навигации с подсказками.

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

14. Переходы между представлениями в рамках одного документа

Входящие в состав API View Transition , переходы между состояниями DOM в рамках одного документа предоставляют механизм для анимации в одностраничных приложениях (SPA) путем захвата снимков состояния и их перехода с помощью CSS.

Browser Support

  • Chrome: 111.
  • Край: 111.
  • Firefox: 144.
  • Сафари: 18.

Source

Узнайте больше о переходах между окнами просмотра одного документа.

15. Переходы между представлениями документов

Расширяет API переходов между представлениями для многостраничных приложений (MPA), позволяя создавать плавные анимированные переходы при навигации между различными документами путем сопоставления элементов с одинаковым view-transition-name на разных страницах.

Browser Support

  • Chrome: 126.
  • Edge: 126.
  • Firefox: не поддерживается.
  • Сафари: 18.2.

Source

Узнайте больше о переходах между представлениями в разных документах.

16. Переходы между представлениями, ограниченные областью видимости элемента.

Введенные в Chrome версии 147, переходы между элементами позволяют запускать переход только для определенного поддерева DOM (используя element.startViewTransition() ), сохраняя при этом остальную часть страницы активной и интерактивной.

Browser Support

  • Chrome: 147.
  • Край: 147.
  • Firefox: не поддерживается.
  • Safari: не поддерживается.

При запуске перехода между представлениями, ограниченного областью видимости элемента, он выполняется изолированно: он сканирует только это поддерево на наличие элементов с view-transition-name , а псевдообъект ::view-transition внедряется в сам корень области видимости. Изоляция возможна благодаря автоматическому применению свойства view-transition-scope: all .

Это позволяет одновременно запускать несколько переходов между представлениями, а также вкладывать переходы между представлениями друг в друга: пока элементы в этих списках перемешиваются, вы также можете менять местами сами списки.

Кроме того, псевдонимы групп автоматически вкладываются друг в друга, а при необходимости отсекается переполнение псевдонима, содержащего дочерние элементы группы.

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

Узнайте больше о переходах между представлениями, ограниченных областью видимости элементов.

17. Двухфазные переходы между видами

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

Узнайте больше о двухфазных переходах между режимами просмотра.

18. Анимация, управляемая прокруткой.

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

Browser Support

  • Chrome: 115.
  • Edge: 115.
  • Firefox: за флагом.
  • Сафари: 26.

Source

19. Анимации, запускаемые при прокрутке.

В Chrome появились новые анимации, запускаемые при прокрутке. Анимации, запускаемые при прокрутке, запускают стандартную CSS-анимацию, основанную на времени, при пересечении границы прокрутки (используя timeline-trigger для определения триггера и animation-trigger для его воспроизведения), предоставляя декларативную альтернативу IntersectionObserver .

Browser Support

  • Chrome: 146.
  • Край: 146.
  • Firefox: не поддерживается.
  • Safari: не поддерживается.

В основе механизма анимации, запускаемой при прокрутке, лежат триггеры временной шкалы, которые могут быть либо активными, либо неактивными.

.element {
  timeline-trigger:
    --t
    view()
    contain 25% contain 75% / entry 105% exit -5%
  ;
}

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

Узнайте больше об анимациях, запускаемых при прокрутке.

20. scroll-target-group: auto

You can now build a native CSS scroll-spy which automatically highlights navigation links based on the user's scroll position. By setting scroll-target-group: auto on a navigation list, the browser automatically sets aria-current="true" and applies the :target-current pseudo-class to the active link. :target-current can then be used to further style the active links.

Browser Support

  • Chrome: 140.
  • Edge: 140.
  • Firefox: не поддерживается.
  • Safari: не поддерживается.

Source

Browser Support

  • Chrome: 135.
  • Edge: 135.
  • Firefox: не поддерживается.
  • Safari: не поддерживается.

Source

Узнайте больше о CSS scroll-spy с помощью scroll-target-group

21. Опция контейнера scrollIntoView()

Метод scrollIntoView() получает опцию container . Установка target.scrollIntoView({container: 'nearest'}) ограничивает прокрутку ближайшим родительским элементом прокрутки, вместо того чтобы она всплывала до самого верха, предотвращая дезориентирующую прокрутку на уровне страницы.

Browser Support

  • Chrome: 1.
  • Край: 79.
  • Firefox: 1.
  • Сафари: 3.

Source

В этом примере используйте флажок, чтобы включить или выключить эту опцию:

Узнайте больше о container: "nearest"

22. Ожидаемая программная прокрутка

All programmatic scroll methods (like scroll() , scrollTo() , and scrollIntoView() ) now return a Promise. This lets developers await the completion of smooth scroll animations before executing subsequent logic (like adding a highlight effect).

Browser Support

  • Chrome: 1.
  • Край: 79.
  • Firefox: 1.
  • Сафари: 3.

Source

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

Часть 4: Максимальное содержание, снижение уровня шума

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

23. Запросы состояния прокрутки ( scrolled )

Запросы scroll-state , являющиеся частью CSS Container Queries, позволяют стилизовать потомков на основе состояния прокрутки контейнера (с помощью container-type: scroll-state ). Запрос scrolled (например, scroll-state(scrolled: bottom) ) определяет направление последней относительной прокрутки, что позволяет создавать такие шаблоны, как "скрытая панель".

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: не поддерживается.
  • Safari: не поддерживается.

Узнайте больше о выкройке "Hidey Bar".

24. Запросы к привязанным контейнерам

CSS Anchor Positioning включает в себя запросы к привязанным контейнерам , которые позволяют проверить, какое резервное положение (например, fallback: bottom или fallback: flip-block ) в данный момент активно для элемента с привязкой к якорю, что позволяет динамически обновлять стили элемента с привязкой к якорю (например, стрелки всплывающих подсказок).

Browser Support

  • Chrome: 143.
  • Край: 143.
  • Firefox: не поддерживается.
  • Safari: не поддерживается.

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

25. CSS border-shape

Свойство border-shape позволяет определять непрямоугольные границы, используя тот же синтаксис для работы с контурами, что и clip-path . В отличие от clipping, border-shape визуально выравнивает границы, контуры и тени относительно заданной формы. Оно также превосходит возможности corner-shape , поскольку border-shape гораздо более гибкое.

Browser Support

  • Chrome: 147.
  • Край: 147.
  • Firefox: не поддерживается.
  • Safari: не поддерживается.

26. Функция CSS shape()

Функция CSS shape() позволяет задавать сложные геометрические контуры непосредственно в CSS. Ее можно использовать со свойствами, такими как clip-path , border-shape или shape-outside для создания органических, непрямоугольных форм, на фоне которых может располагаться контент.

Browser Support

  • Chrome: 135.
  • Edge: 135.
  • Firefox: 148.
  • Сафари: 18.4.

Source

27. Фиксированное позиционирование по каждой оси

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

Browser Support

  • Chrome: 56.
  • Край: 16.
  • Firefox: 32.
  • Сафари: 13.

Эта функция доступна для тестирования в Chrome 148 с включенным флагом «Экспериментальные функции веб-платформы».

Узнайте больше о position: sticky по оси

Часть 5: Адаптация к форм-фактору

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

28. Жесты прокрутки (области, доступные для свайпа)

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

Команда Chrome работает над предлагаемым декларативным решением, которое обсуждается с группой сообщества OpenUI. Это решение позволит создавать нативные области, управляемые жестами (например, списки Gmail, которые можно прокручивать, или боковые меню, которые можно закрыть с помощью жеста), используя overscrollcontainer и вызывающие команды, обеспечивая естественную работу как при касании, так и при прокрутке.

Узнайте больше о жестах прокрутки поверх других экранов.

29. HTML-в-холсте

API HTML-in-Canvas представляет собой серьезный сдвиг парадигмы, позволяющий разработчикам размещать реальные элементы DOM внутри <canvas> (используя атрибут layoutsubtree ). Эти элементы остаются полностью доступными для поиска и поддерживают функции браузера, такие как автозаполнение, при этом позволяя шейдерам WebGL/WebGPU взаимодействовать с ними нативно.

Блиц-раунд

Краткий обзор некоторых других мощных функций, способствующих развитию веб-технологий.

30. Перемещение с сохранением состояния DOM ( moveBefore() )

Метод DOM moveBefore() позволяет изменять родительский элемент DOM-узлов (например, воспроизводимых видео, iframe или сфокусированных полей ввода) без уничтожения их состояния или запуска перезагрузки.

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

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: 144.
  • Safari: не поддерживается.

Source

Узнайте больше о moveBefore()

31. CSS text-fit

text-fit — это экспериментальное свойство CSS, которое динамически масштабирует размер шрифта, чтобы строки текста точно соответствовали ширине содержащего их элемента (например, text-fit: grow per-line-all ).

Узнайте больше о text-fit

32. CSS text-box ( text-box-trim и text-box-edge )

Свойство text-box (а также его полные варианты text-box-trim и text-box-edge ) обрезает вертикальное пространство (межстрочный интервал) над и под текстом, обеспечивая идеальное вертикальное выравнивание и центрирование.

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: за флагом.
  • Сафари: 18.2.

Source

Узнайте больше об text-trim

33. CSS-декорации пробелов

CSS-стили для создания отступов между строками и столбцами добавляют column-rule к сеткам и flexbox, а также вводят новое свойство row-rule , позволяющее разработчикам стилизовать промежутки между строками и столбцами. Больше не нужно возиться с границами или псевдоэлементами для стилизации линий между строками и столбцами.

Browser Support

  • Chrome: 149.
  • Край: 149.
  • Firefox: не поддерживается.
  • Safari: не поддерживается.

Узнайте больше о CSS Gap Decorations

34. Единицы отображения, учитывающие наличие полосы прокрутки ( vw , vh и т. д.)

Viewport units like vw and vh automatically subtract the size of scrollbars (if guaranteed to be visible, using overflow-y: scroll or scrollbar-gutter: stable declared on :root ), preventing accidental horizontal overflow when setting elements to 100vw .

Browser Support

  • Chrome: 20.
  • Край: 12.
  • Firefox: 19.
  • Сафари: 6.

Узнайте больше о блоках просмотра, учитывающих полосу прокрутки.

35. Доступ к псевдоэлементам через JavaScript

Теперь веб-API предоставляют JavaScript доступ к псевдоэлементам CSS (например ::before или ::after ).

Вы можете получить экземпляр CSSPseudoElement используя Element.pseudo(type) , и проверить, какой псевдоэлемент вызвал событие, используя Event.pseudoTarget .

Browser Support

  • Chrome: 149.
  • Край: 149.
  • Firefox: не поддерживается.
  • Safari: не поддерживается.

Узнайте больше о CSSPseudoElement

Заключение

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