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

Una Kravets

Bramus

Adam Argyle

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

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

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

Новый отзывчивый

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

Запросы контейнеров

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

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

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

Подробнее о контейнерных запросах и создании логических компонентов можно узнать в этой статье .

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

Спецификация запроса контейнера также позволяет запрашивать значения стилей родительского контейнера. В настоящее время это частично реализовано в 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()

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

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

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

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

синтаксис nth-of

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

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

Подробнее об этой возможности читайте в нашей статье о синтаксисе nth-of .

text-wrap: balance

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

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

Подробнее об этом читайте в этой статье .

initial-letter

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

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

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

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

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

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

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

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

Широкий цветовой охват

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

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

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

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

смешивание цветов()

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

Вложенность

Вложенность 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 .

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

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

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

Подробнее об использовании каскадных слоев читайте в этой статье .

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

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

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

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

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

Подробнее о @scope читайте в спецификации css-cascade-6 .

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

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

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

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

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

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

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

.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 всплывающего окна предоставляет элементам некоторую встроенную поддержку браузера, например:

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

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

Структура DOM для всплывающего окна декларативна и может быть записана так же просто, как присвоение элементу всплывающего 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 для состояния до открытия и непосредственного применения значения transform к элементу для состояния после открытия/закрытия. Чтобы всё это работало с display, необходимо добавить свойство 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, связанные с анимацией, управляемой прокруткой, и переходами между представлениями.

Анимации с прокруткой

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

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

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

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

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

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

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, и посмотрите видеоролики I/O, чтобы узнать больше о новых веб-приложениях.