Новинки CSS и веб-интерфейса: обзор I/O 2024

Una Kravets

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

Новые интерактивные впечатления

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

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

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

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

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

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

@keyframes appear {
  from {
    opacity: 0;
    scale: 0.8;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

img {
  animation: appear linear;
  animation-timeline: view();
  animation-range: entry 25% cover 50%;
}

Предыдущий код определяет простую анимацию, которая появляется в области просмотра, изменяя непрозрачность и масштаб изображения. Анимация управляется позицией прокрутки. Чтобы создать этот эффект, сначала настройте анимацию CSS, а затем задайте animation-timeline . В этом случае функция view() со своими значениями по умолчанию отслеживает изображение относительно области прокрутки (которая в этом случае также является областью просмотра).

Важно учитывать поддержку браузера и пользовательские настройки, особенно для потребностей доступности. Поэтому используйте правило @supports , чтобы проверить, поддерживает ли браузер анимацию, управляемую прокруткой, и оберните анимацию, управляемую прокруткой, в запрос пользовательских настроек, например @media (prefers-reduced-motion: no-preference) чтобы учитывать предпочтения пользователя в отношении движения. Выполнив эти проверки, вы знаете, что ваши стили будут работать, и что анимация не будет проблематичной для пользователя.

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Apply scroll-driven animations here */
  }
}

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

@keyframes shrink-name {
  from {
    font-size: 2em;
  }
  to {
    font-size: 1.5em;
  }
}

@keyframes add-shadow {
  from {
    box-shadow: none;
  }
  to {
    box-shadow: 0 4px 2px -2px gray;
  }
}

header {
  animation: add-shadow linear both;
}

h2 {
  animation: shrink-name linear both;
}

header, h2 {
  animation-timeline: scroll();
  animation-range: 0 150px;
}

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

Преимущества производительности анимации, управляемой прокруткой

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

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

«Нам удалось сократить до 80% строк кода по сравнению с использованием обычных событий прокрутки JS, и мы заметили, что средняя загрузка ЦП при прокрутке снизилась с 50% до 2%. — Энди Вихалим, старший инженер-программист, Tokopedia»

Будущее эффектов прокрутки

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

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

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

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

Чтобы узнать больше о том, как начать работу с анимацией, управляемой прокруткой, наша команда только что запустила новую серию видеороликов, которую вы можете найти на канале Chrome for Developers на YouTube . Здесь вы узнаете основы анимации, управляемой прокруткой, от Брамуса Ван Дамма, включая то, как работает эта функция, словарь, различные способы создания эффектов и как комбинировать эффекты для создания насыщенных впечатлений. Это отличная серия видеороликов, которую стоит посмотреть.

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

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

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

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

Способ быстрого включения переходов между представлениями в вашем одностраничном приложении так же прост, как обернуть взаимодействие с помощью document.startViewTransition и убедиться, что каждый элемент, который переходит, имеет view-transition-name , встроенный или динамический с помощью JavaScript при создании узлов DOM.

document.querySelectorAll('.delete-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    document.startViewTransition(() => {
      btn.closest('.card').remove();
    });
  })
});

/* Styles for the transition animation */
::view-transition-old(.card):only-child {
  animation: fade-out ease-out 0.5s;
}

Посмотреть переходные классы

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

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

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

Например, вы можете захотеть, чтобы домашняя страница анимировалась на странице блога другим способом, чем страница блога анимируется обратно на домашнюю страницу. Или вы можете захотеть, чтобы страницы менялись местами по-разному, как в этом примере, слева направо и наоборот. Раньше это было неудобно делать. Вы могли бы добавлять классы в DOM для применения стилей, а затем должны были бы удалить классы после этого. View-transition-types позволяют браузеру очищать старые переходы вместо того, чтобы требовать от вас делать это вручную перед инициированием новых, выполняя эту работу за вас.

Вы можете настроить типы в функции document.startViewTransition , которая теперь принимает объект. update — это функция обратного вызова, которая обновляет DOM, а types — это массив с типами.

document.startViewTransition({
  update: myUpdate,
  types: ['slide', 'forwards']
})

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

То, что делает сеть мощной, — это ее обширность. Многие приложения — это не просто одностраничные, а надежные гобелены, содержащие несколько страниц. И вот почему мы так рады объявить, что мы поставляем поддержку переходов между документами для многостраничных приложений в Chromium 126.

Этот новый набор функций для работы с разными документами включает веб-интерфейсы, работающие в одном и том же источнике, например, переход с web.dev на web.dev/blog, но сюда не входит навигация между источниками, например, переход с web.dev на blog.web.dev или на другой домен, например, google.com.

Одно из ключевых отличий переходов между представлениями одного документа заключается в том, что вам не нужно заключать переход в document.startViewTransition() . Вместо этого подключите обе страницы, участвующие в переходе представления, используя правило CSS @view-transition at-rule.

@view-transition {
  navigation: auto;
}

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

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

window.addEventListener('pageswap', async (e) => {
    // ...
});

window.addEventListener('pagereveal', async (e) => {
    // ...
});

В будущем мы планируем расширить возможности переходов между представлениями, в том числе:

• Переходы с заданной областью действия : позволяют ограничить переход поддеревом DOM, позволяя остальной части страницы оставаться интерактивной и поддерживая несколько переходов представлений, выполняемых одновременно.
• Переходы между представлениями с помощью жестов : используйте жесты перетаскивания или смахивания, чтобы инициировать переход между представлениями документов для более естественного взаимодействия в Интернете.
• Соответствие навигации в CSS : настройте переход между представлениями между документами непосредственно в CSS в качестве альтернативы использованию событий pageswap и pagereveal в JavaScript. Чтобы узнать больше о переходах представлений для многостраничных приложений, в том числе о том, как наиболее эффективно настроить их с помощью предварительной визуализации, ознакомьтесь со следующим докладом Брамуса Ван Дамма:

Компоненты пользовательского интерфейса на базе движка: упрощение сложных взаимодействий

Создание сложных веб-приложений — нелегкая задача, но CSS и HTML развиваются, чтобы сделать этот процесс намного более управляемым. Новые функции и усовершенствования упрощают создание компонентов пользовательского интерфейса, позволяя вам сосредоточиться на создании отличного опыта. Это делается совместными усилиями нескольких ключевых органов стандартизации и общественных групп, включая CSS Working Group, Open UI Community Group и WHATWG (Web Hypertext Application Technology Working Group).

Одна из больших болевых точек разработчиков — это, казалось бы, простой запрос: возможность стилизовать выпадающие меню (элемент select). Хотя на первый взгляд это кажется простым, это сложная проблема, затрагивающая множество частей платформы: от макета и рендеринга до прокрутки и взаимодействия, стилей пользовательского агента и свойств CSS, и даже изменений в самом HTML.

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

• Привязки клавиш (для входа/выхода из взаимодействия)
• Щелкните, чтобы закрыть
• Активное управление всплывающими окнами (закрытие других всплывающих окон при открытии одного из них)
• Управление фокусом вкладок
• Визуализация значения выбранного варианта
• Стиль взаимодействия со стрелками
• Управление состоянием (открыто/закрыто)

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

API Popover

Сначала мы добавили глобальный атрибут popover , который, я рад сообщить, несколько недель назад получил статус Baseline New Available.

Элементы popover скрыты с display: none до тех пор, пока не будут открыты с помощью invoker, например, кнопки или JavaScript. Чтобы создать базовый popover, установите атрибут popover для элемента и свяжите его ID с кнопкой с помощью popovertarget . Теперь кнопка является invoker,

<button popovertarget="my-popover">Open Popover</button>

<div id="my-popover" popover>
  <p>I am a popover with more information.</p>
</div>

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

• Продвижение на верхний слой. : Отдельный слой над остальной частью страницы, поэтому вам не придется играть с z-index .
• Функция закрытия подсветки. : Щелчок за пределами области всплывающего окна закроет всплывающее окно и вернет фокус.
• Управление фокусом вкладок по умолчанию. : При открытии вспомогательного окна следующая вкладка останавливается внутри вспомогательного окна.
• Встроенные привязки клавиатуры. : Нажатие клавиши esc или двойное переключение закроет всплывающее окно и вернет фокус.
• Привязки компонентов по умолчанию. Браузер семантически связывает поповер с его триггером.

Вы, возможно, даже используете этот API popover сегодня, не осознавая этого. GitHub реализовал popover в меню «new» своей домашней страницы и в обзоре обзора pull request. Они постепенно улучшили эту функцию, используя popover polyfill , созданный Oddbird при значительной поддержке собственного Keith Cirkel из GitHub, для поддержки старых браузеров.

«Нам удалось сделать устаревшими буквально 1000 строк кода, перейдя на popover. Popover помогает нам, устраняя необходимость бороться с магическими числами z-index... наличие правильной связи дерева доступности, установленной с декларативным поведением кнопок и встроенным поведением фокуса, значительно упрощает для нашей системы проектирования правильную реализацию шаблонов. — Кит Сиркель, инженер-программист, GitHub»

Анимация эффектов входа и выхода

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

Возможность анимировать display и content-visibility на временной шкале ключевых кадров.

Свойство transition-behavior с ключевым словом allow-discrete для включения переходов дискретных свойств, таких как display .

Правило @starting-style для анимации эффектов входа из display: none в верхний слой .

Свойство наложения для управления поведением верхнего слоя во время анимации.

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

dialog, ::backdrop{
  opacity: 0;
  transition: opacity 1s, display 1s allow-discrete, overlay 1s allow-discrete;
}

[open], [open]::backdrop {
  opacity: 1;
}

@starting-style {
  [open], [open]::backdrop {
    opacity: 0;
  }
}

Сначала настройте @starting-style , чтобы браузер знал, из каких стилей анимировать этот элемент в DOM. Это делается как для диалогового окна, так и для фона. Затем стилизуйте открытое состояние для диалогового окна и фона. Для диалогового окна это использует атрибут open , а для всплывающего окна — псевдоэлемент ::popover-open . Наконец, анимируйте opacity , display и overlay с помощью ключевого слова allow-discrete чтобы включить режим анимации, в котором дискретные свойства могут переходить.

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

Popover был только началом истории. Очень захватывающим обновлением является то, что поддержка позиционирования якоря теперь доступна с Chrome 125.

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

Установите отношение позиционирования якоря в CSS, используя свойство anchor-name на элементе привязки (в данном случае кнопка) и свойство position-anchor на позиционируемом элементе (в данном случае подсказка). Затем примените абсолютное или фиксированное позиционирование относительно якоря с помощью функции anchor() . Следующий код размещает верхнюю часть подсказки в нижней части кнопки.

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  position-anchor: --my-anchor;
}

В качестве альтернативы используйте anchor-name непосредственно в функции anchor и пропустите свойство position-anchor . Это может быть полезно при привязке к нескольким элементам.

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  top: anchor(--my-anchor bottom);
}

Наконец, используйте новое ключевое слово anchor-center для свойств justify и align чтобы выровнять позиционируемый элемент по центру его привязки.

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  top: anchor(--my-anchor bottom);
  justify-self: anchor-center;
}

Хотя очень удобно использовать позиционирование якоря с popover, popover определенно не является обязательным условием для использования позиционирования якоря. Позиционирование якоря можно использовать с любыми двумя (или более) элементами для создания визуальных отношений. Фактически, следующая демонстрация, вдохновленная статьей Романа Комарова , показывает, как стиль подчеркивания привязывается к элементам списка при наведении на них курсора или нажатии на них.

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

ul::before {
  content: "";
  position: absolute;
  left:   anchor(var(--target) left);
  right:  anchor(var(--target) right);
  bottom: anchor(var(--target) bottom);
  ...
}

li:nth-child(1) { --anchor: --item-1 }
ul:has(:nth-child(1) a:is(:hover, :focus-visible)) {
  --target: --item-1;
  --color: red;
}

позиционирование inset-area

В дополнение к направленному абсолютному позиционированию по умолчанию, которое вы, вероятно, использовали ранее, есть новый механизм макета, который появился как часть API позиционирования якоря, называемый inset area. Inset area упрощает размещение позиционируемых элементов относительно соответствующих им якорей и работает на сетке из 9 ячеек с элементом якоря в центре. Например, inset-area: top помещает позиционируемый элемент наверх, а inset-area: bottom помещает позиционируемый элемент внизу.

Упрощенная версия первой демонстрации якоря выглядит так с inset-area :

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  position-anchor: --my-anchor;
  inset-area: bottom;
}

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

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

Динамические позиции якоря с position-try-options

Меню и навигацию по подменю гораздо проще создавать с помощью комбинации информера и позиционирования привязки. И когда вы достигаете края области просмотра с вашим закрепленным элементом, вы можете позволить браузеру также управлять изменением позиционирования для вас. Вы можете сделать это несколькими способами. Первый — создать собственные правила позиционирования. В этом случае подменю изначально располагается справа от кнопки «витрина». Но вы можете создать блок @position-try на случай, если справа от меню недостаточно места, задав ему пользовательский идентификатор --bottom . Затем вы подключаете этот блок @position-try к привязке с помощью position-try-options .

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

#submenu {
  position-anchor: --submenu;
  top: anchor(top);
  left: anchor(right);
  margin-left: var(--padding);

  position-try-options: --bottom;

  transition: top 0.25s, left 0.25s;
  width: max-content;
}

@position-try --bottom {
  top: anchor(left);
  left: anchor(bottom);
  margin-left: var(--padding);
}

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

position-try-options: flip-block, flip-inline;

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

.tooltip {
  inset-area: top;
  position-try-options: flip-block;
}

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

Будущее многослойного пользовательского интерфейса

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

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

<a interesttarget="my-tooltip">Hover/Focus to show the tooltip</a>

<span popover=hint id="my-toolip">This is the tooltip</span>

Кроме того, в Canary доступен для тестирования еще один ориентированный на будущее общий вызов ( invoketarget ) благодаря работе двух сторонних разработчиков, Кейта Сиркеля и Люка Варлоу. invoketarget поддерживает декларативный интерфейс разработчика, который popovertarget предоставляет в виде всплывающих окон, нормализованных для всех интерактивных элементов, включая <dialog> , <details> , <video> , <input type="file"> и другие.

<button invoketarget="my-dialog">
  Open Dialog
</button>

<dialog id="my-dialog">
  Hello world!
</dialog>

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

Стилизованный выбор

Используя popover и anchor вместе, команда добилась прогресса в окончательном включении настраиваемого выпадающего списка выбора. Хорошая новость в том, что был достигнут большой прогресс. Плохая новость в том, что этот API все еще находится в экспериментальном состоянии на данный момент. Тем не менее, я рад поделиться некоторыми живыми демонстрациями и обновлениями о нашем прогрессе и надеюсь получить некоторые из ваших отзывов. Во-первых, был достигнут прогресс в том, как включить пользователей в новый настраиваемый опыт выбора. Текущий, находящийся в разработке способ сделать это — использовать свойство appearance в CSS, установленное на appearance: base-select . После установки appearance вы включите новый настраиваемый опыт выбора.

select {
  appearance: base-select;
}

В дополнение к appearance: base-select , есть несколько новых обновлений HTML. Они включают возможность обернуть ваши параметры в datalist для настройки и возможность добавлять произвольный неинтерактивный контент, такой как изображения, в ваши параметры. У вас также будет доступ к новому элементу <selectedoption> , который будет отражать содержимое параметров в себе, которое вы затем сможете настроить в соответствии со своими потребностями. Этот элемент действительно удобен.

Демонстрационный визуальный пример

Демонстрация в реальном времени

<select>
  <button type=popover>
    <selectedoption></selectedoption>
  </button>
  <datalist>
    <option value="" hidden>
      <p>Select a country</p>
    </option>
    <option value="andorra">
      <img src="Flag_of_Andorra.svg" />
      <p>Andorra</p>
    </option>
    <option value="bolivia">
      <img src="Flag_of_Bolivia.svg" />
      <p>Bolivia</p>
    </option>
...
  </datalist>
</select>

Следующий код демонстрирует настройку <selectedoption> в пользовательском интерфейсе Gmail, где визуальный значок представляет тип ответа, выбранный для экономии места. Вы можете использовать базовые стили отображения в selectedoption , чтобы отличать стиль option от стиля предварительного просмотра. В этом случае текст, который отображается в option, может быть визуально скрыт в selectedoption .

Демонстрационный визуальный пример

Демонстрация в реальном времени

selectedoption .text {
  display: none;
}

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

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

Эксклюзивный аккордеон

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

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

<details name="learn-css" open>
  <summary>Welcome to Learn CSS!</summary>
</details>

<details name="learn-css">
  <summary>Box Model</summary>
  <p>...</p>
</details>

<details name="learn-css">
  <summary>Selectors</summary>
  <p>...</p>
</details>

:user-valid и :user-invalid

Еще одним улучшением компонента пользовательского интерфейса являются псевдоклассы :user-valid и :user-invalid . Стабильные во всех браузерах в последнее время, псевдоклассы :user-valid и :user-invalid ведут себя аналогично псевдоклассам :valid и :invalid , но сопоставляют элемент управления формы только после того, как пользователь значительно взаимодействовал с вводом. Это означает, что требуется значительно меньше кода для определения того, взаимодействовало ли значение формы или стало ли оно «грязным», что может быть очень полезно для предоставления обратной связи с пользователем и сокращает объем скриптов, которые были бы необходимы для этого в прошлом.

input:user-valid,
select:user-valid,
textarea:user-valid {
    --state-color: green;
    --bg: linear-gradient(...);
}

input:user-invalid,
select:user-invalid,
textarea:user-invalid {
    --state-color: red;
    --bg: linear-gradient(...);
}

Узнайте больше об использовании псевдоэлементов проверки формы user-* .

field-sizing: content

Еще одно удобное обновление компонента, которое появилось недавно, — это field-sizing: content , которое можно применять к элементам управления формами, таким как inputs и textareas. Это позволяет увеличивать (или уменьшать) размер input в зависимости от его содержимого. field-sizing: content может быть особенно удобен для textareas, поскольку вы больше не привязаны к фиксированным размерам, когда вам может потребоваться прокрутить вверх, чтобы увидеть, что вы написали в предыдущих частях вашего приглашения в слишком маленьком поле ввода.

textarea, select, input {
  field-sizing: content;
}

Узнайте больше о размерах полей .

<hr> в <select>

Возможность включения <hr> или горизонтального элемента правила в selects — еще одна небольшая, но полезная функция компонента. Хотя это не имеет большого семантического применения, это помогает вам красиво разделить контент в списке выбора, особенно контент, который вы не обязательно хотите группировать с optgroup, например значение заполнителя.

Выбрать снимок экрана

Выбрать живую демонстрацию

<select name="majors" id="major-select">
  <option value="">Select a major</option>
  <hr>
  <optgroup label="School of Fine Arts">
    <option value="arthist">
Art History
  </option>
  <option value="finearts">
    Fine Arts
  </option>
...
</select>

Узнайте больше об использовании hr в select

Улучшение качества жизни

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

Вложенность с предпросмотром

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

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

.card {
  /* card base styles */

  h2 {
    /* child element style */
  }

  &.highlight {
    /* modifier style */
  }

  &:hover, &:focus {
    /* state styles */
  }

  @container (width >= 300px) {
    /* container query styles */
  }
}

Выравнивание содержимого для блочной компоновки

Еще одним действительно приятным изменением является возможность использовать механизмы центрирования, такие как align-content в блочной компоновке. Это означает, что теперь вы можете делать такие вещи, как вертикальное центрирование внутри div без необходимости применять flex или grid-макет, и без побочных эффектов, таких как предотвращение margin-collapse, которые вы, возможно, не хотите от этих алгоритмов компоновки.

Скриншот

Демонстрация в реальном времени

div {
  align-content: center;
}

Обтекание текстом: баланс и красота

Говоря о компоновке, компоновка текста получила значительное улучшение с добавлением text-wrap: balance и pretty . text-wrap: balance используется для более однородного блока текста, в то время как text-wrap: pretty фокусируется на сокращении одиночных элементов в последней строке текста.

h1 {
  text-wrap: balance;
}

Узнайте больше о text-wrap: balance .

Международные обновления типографики

Обновления типографской разметки для функций текста CJK получили много приятных обновлений за последний год, например, функцию word-break: auto-phrase , которая переносит строку на естественную границу фразы.

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

Относительный синтаксис цвета

В мире тематического мира мы увидели большое обновление с относительным синтаксисом цвета.

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

:root {
  --hue: 230;
  --primary: oklch(70% .2 var(--hue));
}

li {
  --_bg: oklch(from var(--primary)
    calc(l - (var(--i) * .05))
    calc(c - (var(--i) * .01))
    calc(h - (var(--i) + 5)));
}

Функция light-dark()

Наряду с функцией light-dark() , темация стала гораздо более динамичной и упрощенной.

Функция light-dark() -это эргономическое улучшение, которое упрощает варианты тематического размещения цвета, чтобы вы могли писать стили тем более кратко, как показано на этой визуальной диаграмме Адамом Аргайлом. Раньше вам понадобятся два разных блока кода (ваша тема по умолчанию и запрос предпочтений пользователя), чтобы настроить параметры темы. Теперь вы можете написать эти варианты стиля как для легких, так и для темных тем в одной и той же линии CSS, используя функцию light-dark() .

html {
  color-scheme: light dark;
}

button {
    background-color: light-dark(lightblue, darkblue);
}

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

:has() селектор

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

The :has() селектор позволяет вам проверить, есть ли у детей -элемента конкретные дети, или эти дети находятся в определенном состоянии, и, по сути, также может функционировать как селектор родителей.

:has() уже показал, что он особенно полезен для многих компаний , в том числе PolicyBazaar, которые используют :has() для стиля блоков на основе их внутреннего содержания, например, в разделе сравнения, где стиль корректирует, если есть план для сравнения в блоке или если он пуст.

«С помощью: hast () селектор мы смогли устранить валидацию выбора пользователя на основе JavaScript и заменить его на решение CSS, которое легко работает для нас с тем же опытом, что и раньше. - Аман Сони, технический лидер, политика базара»

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

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

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

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

@property

И, наконец, очень скоро мы рады увидеть землю @property в базовом уровне. Это ключевая особенность для обеспечения семантического значения для CSS -пользовательских свойств (также известных как переменные CSS), и позволяет множество новых функций взаимодействия. @property также позволяет контекстно, Typechecking, Defalault и запасные значения в CSS. Открытие двери для еще более надежных функций, таких как запросы в стиле диапазона. Это особенность, которая никогда не была возможна раньше, и теперь обеспечивает такую ​​большую глубину языку CSS.

@property --card-bg {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0bae8;
}

Заключение

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

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

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

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