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

Una Kravets

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

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

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

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

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

• 115
• 115
• Икс

Источник

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

Создавайте анимацию, управляемую прокруткой

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

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

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

Живая демонстрация

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

Посмотрите живую демонстрацию на Codepen

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

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

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

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

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

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

• 111
• 111
• Икс
• Икс

Источник

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

Переход в режиме просмотра одного и того же документа, как показано на 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;
}

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

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

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

• 125
• 125
• Икс
• Икс

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

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

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

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

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

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

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

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

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

• 126
• 126
• Икс
• Икс

Источник

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

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

@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. Чтобы узнать больше о переходах представлений для многостраничных приложений, в том числе о том, как наиболее эффективно настроить их с помощью рендеринга, ознакомьтесь со следующим выступлением Брамуса Ван Дамма:

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

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

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

Разбивка фрагментов выбранного

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

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

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

API-интерфейс Поповера

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

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

• 114
• 114
• 125
• 17

Источник

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

Демо-визуал

Живая демонстрация

<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 или двойное переключение закроет всплывающее окно и вернет фокус.
• Привязки компонентов по умолчанию. : Браузер семантически связывает поповер с его триггером.

Важно: атрибут popover по своей сути не несет никакого семантического значения, поэтому вам все равно необходимо использовать правильный HTML или ARIA, чтобы придать элементу popover больше контекстуального значения. Кроме того, всплывающее окно не делает остальную часть страницы инертной и не делает ее неинтерактивной или ловушкой фокуса. Если вам нужен такой опыт, элемент <dialog> , вероятно, будет более подходящим.

Меню на главной странице GitHub .

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

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

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

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

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

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

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

• 117
• 117
• 17,4

Источник

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

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

• 117
• 117
• Икс
• 17,5

Источник

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

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

• 117
• 117
• Икс
• Икс

Источник

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

Демо-визуал

Живая демонстрация

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

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

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

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

• 125
• 125
• Икс
• Икс

Источник

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

Демо-визуал

Живая демонстрация

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

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

.positioned {
  position: absolute;
  position-anchor: --my-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;
}

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

Демо-визуал

Живая демонстрация

В этом примере используется функция привязки для установки позиции привязки с использованием физических свойств 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 позиционирования привязки, называемой областью вставки. Область вставки позволяет легко размещать позиционированные элементы относительно их соответствующих привязок и работает в сетке из 9 ячеек с привязывающим элементом в центре. Например, inset-area: top помещает позиционированный элемент вверху, а inset-area: bottom помещает позиционированный элемент внизу.

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

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

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

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

В качестве следующего шага для 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 в настоящее время все еще находится в экспериментальном состоянии. Тем не менее, я рад поделиться некоторыми живыми демонстрациями и обновлениями о нашем прогрессе и, надеюсь, получить ваши отзывы. Во-первых, достигнут прогресс в том, как включить пользователей в новый, настраиваемый интерфейс выбора. Текущий способ сделать это — использовать свойство внешнего вида в CSS, для которого установлено appearance: base-select . Как только внешний вид будет настроен, вы согласитесь на новый, настраиваемый интерфейс выбора.

select {
  appearance: base-select;
}

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

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

Демо-визуал

Живая демонстрация

selectedoption .text {
  display: none;
}

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

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

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

Демо-визуал

Живая демонстрация

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

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

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

• 120
• 120
• Икс
• 17.2

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

Эксклюзивная демонстрация аккордеона

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

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

• 119
• 119
• 88
• 16,5

Источник

Демо-скринкаст

Живая демонстрация

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 , которое можно применять к элементам управления формой, таким как поля ввода и текстовые области. Это позволяет размеру ввода увеличиваться (или уменьшаться) в зависимости от его содержимого. field-sizing: content может быть особенно удобен для текстовых областей, поскольку вы больше не можете использовать фиксированные размеры, и вам может потребоваться прокрутить вверх, чтобы увидеть то, что вы написали в предыдущих частях вашего приглашения, в слишком маленьком поле ввода.

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

• 123
• 123
• Икс
• Икс

Демо-скринкаст

Живая демонстрация

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

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

• 120
• 120
• 117
• 17.2

Источник

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

.card {
  /* card base styles */

  h2 {
    /* child element style */
  }

  &.highlight {
    /* modifier style */
  }

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

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

Align-content для макета блока

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

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

• 123
• 123
• 125
• 17,4

Скриншот

Живая демонстрация

div {
  align-content: center;
}

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

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

Демо-скринкаст

Живая демонстрация

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

h1 {
  text-wrap: balance;
}

Узнайте больше о переносе текста: баланс .

Обновления международной типографики

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

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

• 119
• 119
• Икс
• Икс

Сравнение word-break: normal и word-break: auto-phrase

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

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

• 123
• 123
• Икс
• Икс

Когда знаки препинания появляются подряд, правую половину точки CJK следует удалить.

Синтаксис относительного цвета

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

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

Демо-скринкаст

Живая демонстрация

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

: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() тематика стала намного более динамичной и упрощенной.

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

• 123
• 123
• 120
• 17,5

Источник

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

Визуализация light-dark() . Смотрите демо , чтобы узнать больше.

html {
  color-scheme: light dark;
}

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

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

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

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

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

• 105
• 105
• 121
• 15,4

Источник

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

Демонстрация has() используется для стиля сравнения блоков на Токопедии .

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

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

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

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

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

• 105
• 105
• 110
• 16

Источник

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

Angular.dev сайт демонстрирует запросы контейнера в картах заголовков.

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

Демонстрация экрана

Живая демонстрация

Воссоздание запроса контейнерного контейнера для угловой карты.

@property

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

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

• 85
• 85
• 16.4

Источник

Демонстрация экрана

Живая демонстрация

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

Заключение

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

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

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

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