Что нового в CSS и пользовательском интерфейсе: I/O 2023 Edition

Una Kravets

Bramus

Adam Argyle

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

Вот 20 самых интересных и впечатляющих функций, которые появились недавно или появятся в ближайшее время:

• Контейнерные запросы
• Запросы стиля
• :has() селектор
• n-ный микросинтаксис
• text-wrap: balance
• initial-letter
• Динамические единицы просмотра
• Широкая цветовая гамма
• color-mix()
• Вложение
• Каскадные слои
• Стили с ограниченной областью действия
• Тригонометрические функции
• Отдельные свойства преобразования
• всплывающее окно
• позиционирование якоря
• выбрать меню
• Дискретные переходы свойств
• Анимация, управляемая прокруткой
• Просмотр переходов

Новый Адаптивный

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

Контейнерные запросы

Поддержка браузера

• 105
• 105
• 110
• 16

Источник

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

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

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

Узнайте больше о контейнерных запросах и построении логических компонентов в этом посте .

Запросы стиля

Поддержка браузера

• 111
• 111
• х
• 18

Источник

Спецификация запроса контейнера также позволяет запрашивать значения стиля родительского контейнера. В настоящее время это частично реализовано в Chrome 111, где вы можете использовать пользовательские свойства CSS для применения стилей контейнера.

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

@container style(--sunny: true) {
 .weather-card {
   background: linear-gradient(-30deg, yellow, orange);
 }

 .weather-card:after {
   content: url(<data-uri-for-demo-brevity>);
   background: gold;
 }
}

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

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

:has()

Поддержка браузера

• 105
• 105
• 121
• 15,4

Источник

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

Основываясь на примере запроса контейнера, вы можете использовать :has() чтобы сделать компоненты еще более динамичными. В нем к элементу с элементом «звездочка» применяется серый фон, а к элементу с установленным флажком — синий фон.

Но этот API не ограничивается родительским выбором. Вы также можете стилизовать любые дочерние элементы внутри родительского элемента. Например, заголовок выделяется жирным шрифтом, если в элементе присутствует элемент звездочки. Это достигается с помощью .item:has(.star) .title . Использование селектора :has() дает вам доступ к родительским элементам, дочерним элементам и даже родственным элементам, что делает этот API действительно гибким, и каждый день появляются новые варианты использования.

Примечание. Чтобы предотвратить снижение производительности рендеринга в больших деревьях DOM, мы рекомендуем вам как можно точнее ограничить область действия этого селектора. Например, использование :has() для проверки совпадений в корневом элементе html будет медленнее, чем проверка совпадений в навигационной панели или в элементе карточки с меньшим деревом.

Узнайте больше и изучите еще несколько демонстраций, ознакомьтесь с этой публикацией в блоге, посвященной :has() .

синтаксис n-го числа

Поддержка браузера

• 111
• 111
• 113
• 9

Веб-платформа теперь имеет более продвинутый выбор n-го дочернего элемента. Расширенный синтаксис nth-child дает новое ключевое слово («of»), которое позволяет использовать существующий микросинтаксис An+B с более конкретным подмножеством для поиска.

Если вы используете обычный nth-child, например :nth-child(2) в специальном классе, браузер выберет элемент, к которому применен специальный класс, и который также является вторым дочерним элементом. В этом отличие от :nth-child(2 of .special) который сначала предварительно фильтрует все элементы .special , а затем выбирает второй из этого списка.

Подробно изучите эту функцию в нашей статье о синтаксисе nth-of .

text-wrap: balance

Селекторы и запросы стилей — не единственные места, где мы можем встраивать логику в наши стили; типографика – это другое. Начиная с Chrome 114, вы можете использовать балансировку переноса текста для заголовков, используя свойство text-wrap со значением balance .

Попробуйте демо

Чтобы сбалансировать текст, браузер эффективно выполняет двоичный поиск наименьшей ширины, которая не вызывает дополнительных строк, останавливаясь на одном пикселе CSS (не пикселе отображения). Чтобы еще больше минимизировать шаги бинарного поиска, браузер начинает с 80% средней ширины строки.

Попробуйте демо

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

Узнайте больше об этом в этой статье .

initial-letter

Поддержка браузера

• 110
• 110
• х
• 9

Источник

Еще одно приятное улучшение веб-типографики — initial-letter . Это свойство CSS дает вам лучший контроль над стилем буквицы-вставки.

Вы используете initial-letter в псевдоэлементе :first-letter чтобы указать: Размер буквы в зависимости от того, сколько строк она занимает. Смещение блока буквы, или «раковина», где будет располагаться буква.

Подробнее об использовании intial-letter можно узнать здесь .

Динамические единицы просмотра

Поддержка браузера

• 108
• 108
• 101
• 15,4

Одной из распространенных проблем, с которыми сегодня сталкиваются веб-разработчики, является точное и единообразное определение размеров всей области просмотра, особенно на мобильных устройствах. Как разработчик, вы хотите, чтобы 100vh (100% высоты области просмотра) означало «быть таким же высоким, как область просмотра», но единица vh не учитывает такие вещи, как убирание панелей навигации на мобильных устройствах, поэтому иногда она оказывается слишком длинной и вызывает прокрутку.

Чтобы решить эту проблему, на веб-платформе теперь есть новые значения единиц измерения, в том числе: — Малая высота и ширина области просмотра (или svh и svw ), которые представляют наименьший активный размер области просмотра. - Большая высота и ширина области просмотра ( lvh и lvw ), которые представляют наибольший размер. - Динамическая высота и ширина области просмотра ( dvh и dvw ).

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

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

Дополнительные сведения об этих новых единицах см. в статье Большие, малые и динамические единицы видового экрана .

Широкая цветовая гамма

Поддержка браузера

• 111
• 111
• 113
• 15,4

Источник

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

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

Но теперь на веб-платформе появился ряд новых цветовых пространств, включая REC2020, P3, XYZ, LAB, OKLAB, LCH и OKLCH. Познакомьтесь с новыми цветовыми пространствами Интернета и многим другим в Руководстве по цвету HD .

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

Доступно гораздо больше инструментов для цвета! Не пропустите все замечательные улучшения градиентов. Есть даже совершенно новый инструмент, созданный Адамом Аргайлом, который поможет вам опробовать новый веб-палитру цветов и конструктор градиентов. Попробуйте его на сайтеgradient.style .

сочетание цветов()

Поддержка браузера

• 111
• 111
• 113
• 16.2

Источник

Расширение расширенных цветовых пространств осуществляется с помощью функции color-mix() . Эта функция поддерживает смешивание двух значений цвета для создания новых значений на основе каналов смешиваемых цветов. Цветовое пространство, в котором вы смешиваете, влияет на результаты. Работа в более воспринимаемом цветовом пространстве, таком как oklch, будет использовать другой цветовой диапазон, чем в srgb.

color-mix(in srgb, blue, white);
color-mix(in srgb-linear, blue, white);
color-mix(in lch, blue, white);
color-mix(in oklch, blue, white);
color-mix(in lab, blue, white);
color-mix(in oklab, blue, white);
color-mix(in xyz, blue, white);

Попробуйте демо

Функция color-mix() предоставляет давно востребованную возможность: возможность сохранять непрозрачные значения цвета, добавляя к ним некоторую прозрачность. Теперь вы можете использовать переменные цвета вашего бренда, создавая вариации этих цветов с разной непрозрачностью. Способ сделать это — смешать цвет с прозрачным. Когда вы смешиваете синий цвет вашего бренда с 10% прозрачным, вы получаете непрозрачный цвет бренда на 90%. Вы можете увидеть, как это позволяет быстро создавать цветовые системы.

Вы можете увидеть это в действии сегодня в Chrome DevTools с действительно красивым значком диаграммы Венна предварительного просмотра на панели стилей .

Дополнительные примеры и подробную информацию см. в нашем блоге о Color-Mix или попробуйте эту игровую площадку color-mix().

Основы CSS

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

Вложение

Поддержка браузера

• 120
• 120
• 117
• 17.2

Источник

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

.card {}
.card:hover {}

/* can be done with nesting like */
.card {
  &:hover {

  }
}

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

.card {
  display: grid;
  gap: 1rem;

  @container (width >= 480px) {
    display: flex;
  }
}

Настройка flex макета происходит, когда в контейнере доступно более (или равное) 480px встроенного пространства. Браузер просто применит этот новый стиль отображения при выполнении условий.

Для получения дополнительной информации и примеров ознакомьтесь с нашей публикацией о вложении CSS .

Каскадные слои

Поддержка браузера

• 99
• 99
• 97
• 15,4

Источник

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

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

Изучите проект на Codepen.

Узнайте больше о том, как использовать каскадные слои , в этой статье .

CSS с ограниченной областью действия

Поддержка браузера

• 118
• 118
• 
• 17,4

Источник

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

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

@scope (.card) {
  .title {
    font-weight: bold;
  }
}

Вы можете увидеть @scope с ограничениями области действия вместе с @layer в этой живой демонстрации:

Узнайте больше о @scope в спецификации css-cascade-6 .

Тригонометрические функции

Поддержка браузера

• 111
• 111
• 108
• 15,4

Источник

Еще одной особенностью CSS являются тригонометрические функции, добавляемые к существующим математическим функциям CSS. Эти функции теперь стабильны во всех современных браузерах и позволяют создавать более органичные макеты на веб-платформе. Отличным примером является радиальный макет меню, который теперь можно проектировать и анимировать с помощью функций sin() и cos() .

В демонстрации ниже точки вращаются вокруг центральной точки. Вместо вращения каждой точки вокруг своего центра и последующего перемещения ее наружу, каждая точка перемещается по осям X и Y. Расстояния по осям X и Y определяются с учетом cos() и, соответственно, sin() --angle .

Более подробную информацию по этой теме можно найти в нашей статье о тригонометрических функциях .

Отдельные свойства преобразования

Поддержка браузера

• 104
• 104
• 72
• 14.1

Источник

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

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

.target {
  transform: translateX(50%) rotate(30deg) scale(1.2);
}

.target:hover {
  transform: translateX(50%) rotate(30deg) scale(2); /* Only scale changed here, yet you have to repeat all other parts */
}

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

.target {
  translate: 50% 0;
  rotate: 30deg;
  scale: 1.2;
}

.target:hover {
  scale: 2;
}

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

Дополнительную информацию см. в этом посте об отдельных функциях преобразования .

Настраиваемые компоненты

Чтобы убедиться, что мы удовлетворяем некоторые ключевые потребности разработчиков через веб-платформу, мы работаем с группой сообщества OpenUI и определили три решения, с которых можно начать:

1. Встроенная функциональность всплывающих окон с обработчиками событий, декларативная структура DOM и доступные значения по умолчанию.
2. CSS API для привязки двух элементов друг к другу для обеспечения позиционирования привязки.
3. Настраиваемый компонент раскрывающегося меню, который можно использовать, если вы хотите стилизовать содержимое внутри элемента выбора.

Поповер

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

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

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

Структура DOM для popover является декларативной и может быть написана так же ясно, как присвоение вашему элементу popover id и атрибута popover . Затем вы синхронизируете этот идентификатор с элементом, который будет открывать всплывающее окно, например с кнопкой с атрибутом popovertarget :

<div id="event-popup" popover>
  <!-- Popover content goes in here -–>
</div>

<button popovertarget="event-popup">Create New Event</button>

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

Самую актуальную документацию по поповерам в настоящее время можно найти на MDN .

Расположение якоря

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

Вы можете создать центрированную всплывающую подсказку с помощью функции anchor() , используя ширину якоря, чтобы расположить всплывающую подсказку на 50% от позиции якоря по оси X. Затем используйте существующие значения позиционирования, чтобы применить остальные стили размещения.

Но что произойдет, если всплывающее окно не поместится в область просмотра из-за того, как вы его расположили?

Чтобы решить эту проблему, API позиционирования привязки включает резервные позиции, которые вы можете настроить. В следующем примере создается резервная позиция под названием «сверху, затем снизу». Браузер сначала попытается расположить всплывающую подсказку вверху, и если она не помещается в область просмотра, браузер затем поместит ее под привязывающим элементом внизу.

.center-tooltip {
  position-fallback: --top-then-bottom;
  translate: -50% 0;
}

@position-fallback --top-then-bottom {
  @try {
    bottom: calc(anchor(top) + 0.5rem);
    left: anchor(center);
  }

  @try {
    top: calc(anchor(bottom) + 0.5rem);
    left: anchor(center);
  }
}

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

Узнайте больше о позиционировании якоря в этом сообщении блога .

<selectmenu>

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

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

<selectmenu>
  <button slot="button" behavior="button">
    <span>Select event type</span>
    <span behavior="selected-value" slot="selected-value"></span>
    <span><img src="icon.svg"/></span>
  </button>
  <option value="meeting">
    <figure class="royalblue"></figure>
    <p>Meeting</p>
  </option>
  <option value="break">
    <figure class="gold"></figure>
     <p>Lunch/Break</p>
  </option>
  ...
</selectmenu>

Дискретные переходы свойств

Чтобы все это плавно включало и выключало всплывающие окна, в Интернете нужен какой-то способ анимации отдельных свойств. Это свойства, которые раньше не поддавались анимации, например анимация к верхнему слою и обратно, анимация к display: none .

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

Следующая демонстрация всплывающих окон анимирует появление и удаление всплывающих окон с использованием :popover-open для открытого состояния, @starting-style для состояния до открытия и применяет значение преобразования непосредственно к элементу для состояния после открытия-закрытия. . Чтобы все это работало с отображением, необходимо добавить свойство transition , например:

.settings-popover {
  &:popover-open {
    /*   0. before-change   */
    @starting-style {
      transform: translateY(20px);
      opacity: 0;
    }

    /*   1. open (changed) state   */
    transform: translateY(0);
    opacity: 1;
  }

  /*   2. After-change state */
  transform: translateY(-50px);
  opacity: 0;

  /*  enumarate transitioning properties, including display */
  transition: transform 0.5s, opacity 0.5s, display 0.5s allow-discrete;
}

Взаимодействия

Это подводит нас к взаимодействиям, последней остановке в этом туре по функциям веб-интерфейса.

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

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

Поддержка браузера

• 115
• 115
• 
• х

Источник

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

Этот API поддерживает набор классов JavaScript и свойств CSS, которые позволяют легко создавать декларативную анимацию, управляемую прокруткой.

Для управления CSS-анимацией путем прокрутки используйте новые свойства scroll-timeline , view-timeline и animation-timeline . Чтобы управлять API веб-анимации JavaScript, передайте экземпляр ScrollTimeline или ViewTimeline в качестве параметра timeline в Element.animate()

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

Подробное подробное руководство по созданию анимации, управляемой прокруткой, можно найти в этой статье об анимации, управляемой прокруткой .

Просмотр переходов

Поддержка браузера

• 111
• 111
• х
• 18

Источник

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

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

function spaNavigate(data) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow(data);
    return;
  }

  // With a transition:
  document.startViewTransition(() => updateTheDOMSomehow(data));
}

То, как должен выглядеть переход, контролируется с помощью CSS.

@keyframes slide-from-right {
  from { opacity: 0; transform: translateX(75px); }
}

@keyframes slide-to-left {
  to { opacity: 0; transform: translateX(-75px); }
}

::view-transition-old(root) {
  animation: 350ms both slide-to-left ease;
}

::view-transition-new(root) {
  animation: 350ms both slide-from-right ease;
}

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

Переходы просмотра в настоящее время работают с одностраничными приложениями (SPA) из Chrome 111. Работа над поддержкой многостраничных приложений ведется. Чтобы узнать больше, ознакомьтесь с нашим полным руководством по переходам, которое проведет вас через все это.

Заключение

Следите за всеми последними лендингами в CSS и HTML прямо здесь, на сайте Developer.chrome.com, а также смотрите видеоролики о вводе-выводе , чтобы узнать больше о веб-лендингах.