CSS в упаковке: 2023 год!
Перейти к содержимому:
- Адаптивный дизайн
- Контейнерные запросы
- Запросы стиля
- : есть селектор
- Обновить медиа-запрос
- Скрипт медиа-запроса
- Медиа-запрос прозрачности
Ух ты! 2023 год был огромным годом для CSS!
От #Interop2023 до множества новых направлений в области CSS и пользовательского интерфейса, которые предоставляют разработчикам возможности, которые раньше считались невозможными на веб-платформе. Теперь каждый современный браузер поддерживает запросы к контейнерам, подсетку, селектор :has()
и множество новых цветовых пространств и функций . В Chrome поддерживается анимация прокрутки, основанная только на CSS, а также плавная анимация между веб-представлениями с помощью переходов между представлениями . И в довершение ко всему, появилось так много новых примитивов, которые стали более удобными для разработчиков, например вложенность CSS и стили с ограниченной областью действия .
Какой это был год! И поэтому мы хотели бы завершить этот знаменательный год, отмечая и признавая всю тяжелую работу разработчиков браузеров и веб-сообщества, которая сделала все это возможным.
Архитектурные основы
Начнем с обновлений основного языка и возможностей CSS. Это функции, которые лежат в основе создания и организации стилей и придают разработчику огромные возможности.
Тригонометрические функции
В Chrome 111 добавлена поддержка тригонометрических функций sin()
, cos()
, tan()
, asin()
, acos()
, atan()
и atan2()
, что делает их доступными во всех основных движках. Эти функции очень удобны для анимации и макетирования. Например, теперь гораздо проще размещать элементы по кругу вокруг выбранного центра.
Узнайте больше о тригонометрических функциях в CSS .
Сложный выбор nth-*
Поддержка браузера
- 111
- 111
- 113
- 9
С помощью селектора псевдокласса :nth-child()
можно выбирать элементы в DOM по их индексу. Используя микросинтаксис An+B
вы получаете точный контроль над тем, какие элементы вы хотите выбрать.
По умолчанию псевдонимы :nth-*()
учитывают все дочерние элементы. Начиная с Chrome 111, вы можете при желании передать список селекторов в :nth-child()
и :nth-last-child()
. Таким образом, вы можете предварительно отфильтровать список дочерних элементов до того, как An+B
сделает свое дело.
В следующей демонстрации логика 3n+1
применяется только к маленьким куклам путем их предварительной фильтрации с использованием of .small
. Используйте раскрывающиеся списки для динамического изменения используемого селектора.
Узнайте больше о сложных выборках nth-* .
Объем
В Chrome 118 добавлена поддержка @scope
— правила, которое позволяет сопоставить селектор области с определенным поддеревом документа. Благодаря стилю с ограниченной областью действия вы можете очень точно указать, какие элементы вы выбираете, без необходимости писать слишком специфические селекторы или тесно связывать их со структурой DOM.
Поддерево с областью действия определяется корнем области видимости (верхняя граница) и необязательным пределом области видимости (нижняя граница).
@scope (.card) { … } /* scoping root */
@scope (.card) to (.card__content) { … } /* scoping root + scoping limit*/
Правила стиля, помещенные внутри блока области, будут нацелены только на элементы внутри вырезанного поддерева. Например, следующее правило стиля с ограниченной областью действия предназначено только для элементов <img>
, которые находятся между элементом .card
и любым вложенным компонентом, соответствующим селектору [data-component]
.
@scope (.card) to ([data-component]) {
img { … }
}
В следующей демонстрации элементы <img>
в компоненте карусели не совпадают из-за примененного ограничения области действия.
Скриншот демо-версии Scope
![Справочный снимок экрана для демонстрации @scope Reference screenshot for the @scope demo](https://developer.chrome.google.cn/static/blog/css-wrapped-2023/image/at-scope.png?authuser=8&hl=ru)
Живая демо-версия Scope
@scope
демо Узнайте больше о @scope
в статье «Как использовать @scope
чтобы ограничить охват ваших селекторов» . В этой статье вы узнаете о селекторе :scope
, о том, как обрабатывается специфичность, об областях без прелюдий и о том, как @scope
влияет на каскад.
Вложение
Перед вложением каждый селектор необходимо было явно объявить отдельно друг от друга. Это приводит к повторению, большому объему таблиц стилей и разбросанности опыта разработки. Теперь селекторы могут быть продолжены сгруппированными внутри них соответствующими правилами стиля.
dl {
/* dt styles */
dt {
/* dl dt styles */
}
dd {
/* dl dd styles */
}
}
/* same as */
dt {
/* dt styles */
}
dl dt {
/* dl dt styles */
}
dl dd {
/* dl dd styles */
}
Вложение скринкаста
Вложение живой демонстрации
Вложение может уменьшить вес таблицы стилей, уменьшить накладные расходы на повторяющиеся селекторы и централизовать стили компонентов. Первоначально синтаксис был выпущен с ограничением, требующим использования &
в различных местах, но с тех пор было снято с помощью обновления синтаксиса с упрощенной вложенностью .
Узнайте больше о вложении .
Подсетка
CSS- subgrid
позволяет создавать более сложные сетки с лучшим выравниванием между дочерними макетами. Это позволяет сетке, находящейся внутри другой сетки, принимать строки и столбцы внешней сетки как свои собственные, используя subgrid
в качестве значения для строк или столбцов сетки.
Скринкаст подсетки
Живая демонстрация подсетки
Subgrid особенно полезен для выравнивания одноуровневых элементов по динамическому содержимому друг друга. Это освобождает копирайтеров, UX-писателей и переводчиков от попыток создать копию проекта, которая «вписывается» в макет. С помощью подсетки макет можно настроить в соответствии с содержимым.
Узнайте больше о подсетке .
Типография
В 2023 году веб-типографика претерпела несколько ключевых обновлений. Особенно приятным прогрессивным улучшением является свойство text-wrap
. Это свойство позволяет настраивать типографский макет, созданный в браузере, без необходимости создания дополнительных сценариев. Попрощайтесь с неудобной длиной строк и здравствуйте более предсказуемой типографикой!
Начальная буква
Свойство initial-letter
, появившееся в начале года в Chrome 110, представляет собой небольшую, но мощную функцию CSS, которая задает стиль размещения начальных букв. Вы можете расположить буквы как в опущенном, так и в поднятом состоянии. Свойство принимает два аргумента: первый для того, насколько глубоко опустить букву в соответствующий абзац, и второй для того, насколько сильно поднять букву над ним. Вы даже можете комбинировать оба варианта, как показано в следующей демонстрации.
Скриншот начальной буквы
![Скриншот демо-версии начальной буквы](https://developer.chrome.google.cn/static/blog/css-wrapped-2023/image/initial-letter.png?authuser=8&hl=ru)
Демо с начальной буквой
initial-letter
псевдоэлемента ::first-letter
чтобы увидеть ее сдвиг.Узнайте больше о начальной букве .
перенос текста: баланс и красота
Как разработчик, вы не знаете окончательный размер, размер шрифта или даже язык заголовка или абзаца. Все переменные, необходимые для эффективного и эстетичного переноса текста, находятся в браузере. Поскольку браузер знает все факторы, такие как размер шрифта, язык и выделенную область, он является отличным кандидатом для обработки расширенного и высококачественного макета текста.
Здесь на помощь приходят два новых метода переноса текста: один называется balance
, а другой — pretty
. Значение balance
направлено на создание гармоничного блока текста, а pretty
направлено на предотвращение сирот и обеспечение правильной расстановки переносов. Обе эти задачи традиционно выполнялись вручную, и здорово поручить эту работу браузеру и заставить его работать на любом переведенном языке.
Перенос текста
Живая демонстрация с переносом текста
balance
и pretty
на заголовок и абзац. Попробуйте перевести демо на другой язык!Узнайте больше о переносе текста: баланс .
Цвет
2023 год стал годом цвета для веб-платформы. Благодаря новым цветовым пространствам и функциям, обеспечивающим динамическое цветовое оформление, ничто не мешает вам создавать яркие, насыщенные темы, которых заслуживают ваши пользователи, а также делать их настраиваемыми!
Цветовые пространства HD (уровень цвета 4)
От аппаратного обеспечения до программного обеспечения, от CSS до мигающих огней; Нашим компьютерам может потребоваться немало усилий, чтобы попытаться представить цвета так же хорошо, как видят наши человеческие глаза. В 2023 году у нас появятся новые цвета, больше цветов, новые цветовые пространства, цветовые функции и новые возможности.
CSS и цвет теперь могут: — Проверить, поддерживает ли оборудование экрана пользователя передачу цветов HDR с широкой гаммой. – Проверьте, понимает ли браузер пользователя синтаксис цветов, например Oklch или Display P3. - Укажите цвета HDR в Oklab, Oklch, HWB, Display P3, Rec.2020, XYZ и других. - Создавайте градиенты с цветами HDR. - Интерполируйте градиенты в альтернативных цветовых пространствах. - Смешивайте цвета с помощью color-mix()
. - Создавайте варианты цвета с относительным синтаксисом цвета.
Цветной скринкаст 4
Цвет 4 Демо
Узнайте больше о Color 4 и цветовых пространствах .
функция смешивания цветов
Смешивание цветов — классическая задача, и в 2023 году CSS тоже сможет это сделать. Вы можете не только смешивать белый или черный цвет с цветом, но и прозрачность, и делать все это в любом цветовом пространстве по вашему выбору. Это одновременно базовая функция цвета и расширенная функция цвета.
color-mix() Скринкаст
color-mix() Демо
Вы можете думать о color-mix()
как о моменте времени из градиента. Если градиент показывает все шаги, необходимые для перехода от синего к белому, color-mix()
показывает только один шаг. Ситуация усложнится, когда вы начнете принимать во внимание цветовые пространства и узнаете, насколько может отличаться смешивание цветового пространства от результатов.
Узнайте больше о color-mix() .
Относительный синтаксис цвета
Синтаксис относительного цвета (RCS) — это дополнительный метод color-mix()
для создания вариантов цвета. Это немного более мощный метод, чем color-mix(), но у него другая стратегия работы с цветом. color-mix()
может смешивать белый цвет, чтобы осветлить цвет, где RCS предоставляет точный доступ к каналу яркости и возможность использовать calc()
на канале для программного уменьшения или увеличения яркости.
Скринкаст RCS
Живая демо-версия RCS
RCS позволяет выполнять относительные и абсолютные манипуляции с цветом. Относительное изменение — это когда вы берете текущее значение насыщенности или яркости и изменяете его с помощью calc()
. Абсолютное изменение — это замена значения канала на совершенно новое, например установка непрозрачности на 50 %. Этот синтаксис предоставляет вам содержательные инструменты для создания тем, временных вариантов и многого другого.
Узнайте больше о синтаксисе относительного цвета .
Адаптивный дизайн
Адаптивный дизайн получил развитие в 2023 году. Этот революционный год позволил реализовать новые функции, которые полностью меняют способ создания адаптивного веб-интерфейса, и положил начало новой модели адаптивного дизайна на основе компонентов. Комбинация контейнерных запросов и :has()
поддерживает компоненты, которые имеют свой адаптивный и логический стиль в зависимости от размера их родительского элемента, а также присутствия или состояния любого из их дочерних элементов. Это означает, что вы, наконец, можете отделить макет на уровне страницы от макета на уровне компонента и написать логику один раз, чтобы использовать свой компонент повсюду!
Запросы размера контейнера
Вместо использования информации о глобальном размере области просмотра для применения стилей CSS контейнерные запросы поддерживают запрос родительского элемента на странице. Это означает, что компоненты могут быть стилизованы динамически в нескольких макетах и в нескольких представлениях. Запросы контейнеров на размер стали стабильными во всех современных браузерах в День святого Валентина в этом году (14 февраля).
Чтобы использовать эту функцию, сначала настройте включение элемента, к которому вы запрашиваете, а затем, аналогично медиа-запросу, используйте @container
с параметрами размера, чтобы применить стили. Наряду с запросами контейнеров вы получаете размеры запросов контейнеров. В следующей демонстрации размер запроса контейнера cqi
(представляющий размер встроенного контейнера) используется для определения размера заголовка карты.
@container Скринкаст
@container Демо
Узнайте больше об использовании контейнерных запросов .
Стиль запросов к контейнеру
Запросы стиля частично реализованы в Chrome 111. В настоящее время запросы стиля позволяют запрашивать значения пользовательских свойств родительского элемента при использовании @container style()
. Например, запросите, существует ли значение пользовательского свойства или установлено ли ему определенное значение, например @container style(--rain: true)
.
Скриншот запроса стиля
![Демо-скриншот для запросов контейнера стилей погодных карточек](https://developer.chrome.google.cn/static/blog/css-wrapped-2023/image/stylecq.png?authuser=8&hl=ru)
Демонстрация запроса стиля
Хотя это похоже на использование имен классов в CSS, запросы стилей имеют некоторые преимущества. Во-первых, с помощью запросов стиля вы можете обновлять значение в CSS по мере необходимости для псевдосостояний. Кроме того, в будущих версиях реализации вы сможете запрашивать диапазоны значений, чтобы определить примененный стиль, например style(60 <= --weather <= 70)
и стиль на основе пар свойство-значение, например style(font-style: italic)
.
Узнайте больше об использовании запросов стиля .
:has() селектор
На протяжении почти 20 лет разработчики просили о «родительском селекторе» в CSS. Теперь это возможно с помощью селектора :has()
, поставляемого в Chrome 105. Например, использование .card:has(img.hero)
выберет элементы .card
, у которых есть дочернее изображение героя.
:has() Скриншот демо
![Справочный снимок экрана для демонстрации :has() Reference screenshot for the :has() demo](https://developer.chrome.google.cn/static/blog/css-wrapped-2023/image/has-demo-1.png?authuser=8&hl=ru)
:has() Живая демонстрация
:has()
демо: карта без изображения или с изображением Поскольку :has()
принимает в качестве аргумента относительный список селекторов, вы можете выбрать гораздо больше, чем родительский элемент. Используя различные комбинаторы CSS, можно не только перемещаться вверх по дереву DOM, но и делать боковой выбор. Например, li:has(+ li:hover)
выберет элемент <li>
, который предшествует текущему наведенному элементу <li>
.
:has() Скринкаст
:has() Демо
:has()
: док-станция Узнайте больше о селекторе CSS :has()
.
Обновить медиа-запрос
Медиа-запрос update
дает вам возможность адаптировать пользовательский интерфейс к частоте обновления устройства. Эта функция может сообщать значения fast
, slow
или none
, которые относятся к возможностям различных устройств.
Большинство устройств, для которых вы разрабатываете дизайн, скорее всего, будут иметь высокую частоту обновления. Сюда входят настольные компьютеры и большинство мобильных устройств. Электронные книги и устройства, такие как платежные системы с низким энергопотреблением, могут иметь низкую частоту обновления. Знание того, что устройство не поддерживает анимацию или частые обновления, означает, что вы можете сэкономить заряд батареи или избежать ошибочных обновлений.
Обновить скринкаст
Обновить демо-версию
Узнайте больше о @media (обновление) .
Скрипт медиа-запроса
Медиа-запрос сценария можно использовать для проверки доступности JavaScript. Это очень хорошо для прогрессивного улучшения. До этого медиа-запроса стратегия определения доступности JavaScript заключалась в размещении класса nojs
в HTML и удалении его с помощью JavaScript. Эти скрипты можно удалить, поскольку CSS теперь может обнаруживать JavaScript и соответствующим образом корректировать их.
Узнайте, как включить и отключить JavaScript на странице для тестирования с помощью Chrome DevTools здесь .
Сценарий скринкаста
Демонстрация сценариев
Рассмотрим переключение темы на веб-сайте. Медиа-запрос сценария может помочь заставить переключение работать в соответствии с системными настройками, поскольку JavaScript недоступен. Или рассмотрите компонент переключателя: если доступен JavaScript, переключатель можно будет перемещать жестом, а не просто включать и выключать. Множество прекрасных возможностей для обновления UX, если сценарии доступны, и обеспечения полноценного базового опыта, если сценарии отключены.
Узнайте больше о скрипте .
Медиа-запрос с пониженной прозрачностью
Непрозрачные интерфейсы могут вызвать головную боль или стать проблемой при различных нарушениях зрения. Вот почему в Windows, macOS и iOS есть системные настройки, которые могут уменьшить или удалить прозрачность пользовательского интерфейса. Этот медиа-запрос для prefers-reduced-transparency
хорошо сочетается с другими медиа-запросами с предпочтениями, которые позволяют вам проявлять творческий подход, а также приспосабливаться к пользователям.
Скринкаст с пониженной прозрачностью
Демонстрация пониженной прозрачности
В некоторых случаях вы можете предоставить альтернативный макет, в котором контент не накладывается на другой контент. В других случаях непрозрачность цвета можно настроить так, чтобы она была непрозрачной или почти непрозрачной. В следующем сообщении блога есть еще больше вдохновляющих демонстраций, которые адаптируются к предпочтениям пользователя. Взгляните на них, если вам интересно, когда этот медиа-запрос полезен.
Узнайте больше о @media (предпочитает пониженную прозрачность) .
Взаимодействие
Взаимодействие является краеугольным камнем цифрового опыта. Это помогает пользователям получать отзывы о том, на что они нажали и где они находятся в виртуальном пространстве. В этом году появилось много интересных функций, которые упростили создание и реализацию взаимодействий, обеспечивая плавное взаимодействие пользователей и более утонченный опыт работы в Интернете.
Просмотр переходов
Переходы между просмотрами оказывают огромное влияние на взаимодействие со страницей. С помощью API View Transitions вы можете создавать визуальные переходы между двумя состояниями страницы вашего одностраничного приложения. Эти переходы могут представлять собой полностраничные переходы или более мелкие элементы на странице, например добавление или удаление нового элемента в список.
В основе API View Transitions лежит функция document.startViewTranstion
. Передайте функцию, которая обновляет DOM до нового состояния, и API позаботится обо всем за вас. Для этого делается снимок «до» и «после», а затем осуществляется переход между ними. Используя CSS, вы можете управлять тем, что будет захвачено, и, при необходимости, настраивать анимацию этих снимков.
Скринкаст ВТ
ВТ Демо
API View Transitions для одностраничных приложений, включенный в Chrome 111. Узнайте больше о View Transitions .
Функция линейного замедления
Поддержка браузера
- 113
- 113
- 112
- 17.2
Не позволяйте названию этой функции ввести вас в заблуждение. Функция linear()
(не путать с ключевым словом linear
) позволяет создавать сложные функции плавности простым способом, но при этом теряется некоторая точность.
До появления linear()
, который появился в Chrome 113, в CSS было невозможно создавать эффекты отскока или пружины. Благодаря linear()
можно аппроксимировать эти плавности, упрощая их до ряда точек, а затем линейно интерполируя между этими точками.
linear()
использует эти точки и линейно интерполирует между ними. Скринкаст с линейным замедлением
Демонстрация линейного замедления
linear()
. Узнайте больше о linear()
. Чтобы создать кривые linear()
, используйте генератор линейного замедления .
Конец прокрутки
Многие интерфейсы включают в себя взаимодействие с прокруткой, и иногда интерфейсу необходимо синхронизировать информацию, относящуюся к текущей позиции прокрутки, или получить данные на основе текущего состояния. Перед событием scrollend
вам приходилось использовать неточный метод таймаута, который мог срабатывать, пока палец пользователя все еще находился на экране. Благодаря событию scrollend
у вас есть идеально синхронизированное событие прокрутки, которое понимает, находится ли пользователь в середине жеста или нет.
Скринкаст с прокруткой
Прокрутка Демо
Это было важно для браузера, потому что JavaScript не может отслеживать присутствие пальцев на экране во время прокрутки, информация просто недоступна. Куски неточного кода попытки завершения прокрутки теперь можно удалить и заменить событием высокой точности, принадлежащим браузеру.
Узнайте больше о прокрутке .
Анимация, управляемая прокруткой
Анимация, управляемая прокруткой, — это замечательная функция, доступная в Chrome 115. Она позволяет вам взять существующую анимацию CSS или анимацию, созданную с помощью API веб-анимации , и связать ее со смещением прокрутки скроллера. Когда вы прокручиваете вверх и вниз или влево и вправо при горизонтальной прокрутке, связанная анимация будет перемещаться вперед и назад в прямом ответе.
С помощью ScrollTimeline вы можете отслеживать общий ход работы скроллера, как показано в следующей демонстрации. При прокрутке страницы до конца текст раскрывается посимвольно.
Скринкаст ПДД
Демо-версия ПДД
С помощью ViewTimeline вы можете отслеживать элемент, когда он пересекает полосу прокрутки. Это работает аналогично тому, как IntersectionObserver отслеживает элемент. В следующей демонстрации каждое изображение раскрывается с момента входа в область прокрутки и до тех пор, пока не окажется в центре.
Демо-скринкаст SDA
Живая демонстрация SDA
Поскольку анимация, управляемая прокруткой, работает с анимацией CSS и API веб-анимации, вы можете воспользоваться всеми преимуществами, которые дают эти API. Это включает в себя возможность запускать эти анимации вне основного потока. Теперь у вас может быть плавная и плавная анимация, управляемая прокруткой и выходящая за рамки основного потока с помощью всего лишь нескольких строк дополнительного кода — что вам не нравится?
Чтобы узнать больше об анимации, управляемой прокруткой , прочтите эту статью со всеми подробностями или посетите сайт Scroll-driven-animations.style , который включает множество демонстраций.
Отложенное прикрепление к временной шкале
При применении анимации, управляемой прокруткой, через CSS механизм поиска для поиска управляющего скроллера всегда проходит вверх по дереву DOM, что ограничивает его только предками прокрутки. Однако очень часто элемент, который необходимо анимировать, является не дочерним элементом скроллера, а элементом, расположенным в совершенно другом поддереве.
Чтобы позволить анимированному элементу найти именованную временную шкалу прокрутки не-предка, используйте свойство timeline-scope
общего родительского элемента. Это позволяет прикрепить к нему определенную scroll-timeline
или view-timeline
с этим именем, что дает ей более широкую область применения. При этом любой дочерний элемент этого общего родителя может использовать временную шкалу с этим именем.
![Визуализация поддерева DOM с областью временной шкалы, используемой для общего родительского элемента Visualization of a DOM subtree with timeline-scope used on a shared parent](https://developer.chrome.google.cn/static/blog/css-wrapped-2023/image/defferedtimeline.png?authuser=8&hl=ru)
timeline-scope
объявлена для общего родителя, scroll-timeline
, объявленная в скроллере, может быть найдена элементом, который использует ее в качестве animation-timeline
Демо-скринкаст
Живая демонстрация
Узнайте больше о timeline-scope
.
Анимация дискретных свойств
Еще одна новая возможность в 2023 году — возможность анимировать отдельные анимации, например анимацию на display: none
. Начиная с Chrome 116, вы можете использовать display
и content-visibility
в правилах ключевых кадров. Вы также можете перенести любое дискретное свойство в точку 50%, а не в точку 0%. Это достигается с помощью свойства transition-behavior
с использованием ключевого слова allow-discrete
или свойства transition
в качестве сокращенного обозначения.
Дискретная анимация. Скринкаст
Дискретная анимация. Демо
Узнайте больше о переходе дискретной анимации .
@starting-style
Правило CSS @starting-style
основано на новых веб-возможностях для анимации на display: none
. Это правило позволяет придать элементу стиль «до открытия», который браузер сможет просмотреть до того, как элемент будет открыт на странице. Это очень полезно для анимации входа, а также для анимации таких элементов, как всплывающее окно или диалог. Это также может быть полезно в любой момент, когда вы создаете элемент и хотите предоставить ему возможность анимации. Возьмем следующий пример, который плавно анимирует атрибут popover
(см. следующий раздел) в поле зрения и в верхнем слое снаружи. окно просмотра.
@starting-style Скринкаст
@starting-style Демо
Узнайте больше о @starting-style и других анимациях входа.
Наложение
К переходу можно добавить новое свойство CSS overlay
, чтобы элементы со стилями верхнего слоя, такие как popover
и dialog
, могли плавно анимироваться из верхнего слоя. Если вы не наложите переход, ваш элемент немедленно снова станет обрезанным, преобразованным и закрытым, и вы не увидите, как произойдет переход. Аналогично, overlay
позволяет ::backdrop
плавно анимировать при добавлении к элементу верхнего слоя.
Наложение скринкаста
Наложение живой демонстрации
Узнайте больше о наложении и других анимациях выхода.
Компоненты
2023 год был большим годом для пересечения стилей и HTML-компонентов, с появлением popover
и большой работой над позиционированием привязки и будущим стилем выпадающих списков. Эти компоненты упрощают создание общих шаблонов пользовательского интерфейса без необходимости каждый раз полагаться на дополнительные библиотеки или создавать собственные системы управления состоянием с нуля.
Трещать
API Popover помогает создавать элементы, которые располагаются поверх остальной части страницы. Это могут быть меню, выбор и всплывающие подсказки. Вы можете создать простой всплывающий элемент, добавив атрибут popover
и id
к всплывающему элементу и подключив его атрибут id
к кнопке вызова с помощью popovertarget="my-popover"
. API Popover поддерживает:
- Продвижение на верхний слой. Поповеры появятся на отдельном слое над остальной частью страницы, поэтому вам не придется экспериментировать с z-index.
- Функция отключения освещения. Щелчок за пределами области всплывающего окна закроет всплывающее окно и вернет фокус.
- Управление фокусом по умолчанию. Открытие всплывающего окна приводит к тому, что следующая табуляция останавливается внутри всплывающего окна.
- Доступные привязки клавиатуры. Нажатие клавиши
esc
или двойное переключение закроет всплывающее окно и вернет фокус. - Доступные привязки компонентов. Семантическое соединение элемента popover с триггером popover.
Поповер Скринкаст
Поповер Живая Демоверсия
Горизонтальные правила в select
Еще одно небольшое изменение в HTML, которое появилось в Chrome и Safari в этом году, — это возможность добавлять элементы горизонтальных правил (теги <hr>
) в элементы <select>
, чтобы помочь визуально разбить ваш контент. Раньше размещение тега <hr>
в элементе выбора просто не отображалось. Но в этом году и Safari, и Chrome поддерживают эту функцию, позволяя лучше разделять контент внутри элементов <select>
.
Выберите снимок экрана
![снимок экрана hr в select со светлой и темной темой в Chrome](https://developer.chrome.google.cn/static/blog/css-wrapped-2023/image/hrselect.jpg?authuser=8&hl=ru)
Выберите живую демонстрацию
Узнайте больше об использовании hr в select
:действительные и недействительные псевдоклассы
Стабильные во всех браузерах в этом году, :user-valid
и :user-invalid
ведут себя аналогично псевдоклассам :valid
и :invalid
, но соответствуют элементу управления формы только после того, как пользователь существенно взаимодействовал с вводом. Обязательный и пустой элемент управления формы будет соответствовать :invalid
даже если пользователь еще не начал взаимодействовать со страницей. Тот же элемент управления не будет соответствовать :user-invalid
до тех пор, пока пользователь не изменит ввод и не оставит его в недопустимом состоянии.
Благодаря этим новым селекторам больше нет необходимости писать код с сохранением состояния, чтобы отслеживать вводимые пользователем изменения.
:user-* Скринкаст
:user-* Живая демонстрация
Узнайте больше об использовании псевдоэлементов проверки формы user-* .
Эксклюзивный аккордеон
Поддержка браузера
- 120
- 120
- Икс
- 17.2
Распространенным шаблоном пользовательского интерфейса в Интернете является компонент «аккордеон». Чтобы реализовать этот шаблон, вы объединяете несколько элементов <details>
, часто визуально группируя их, чтобы указать, что они принадлежат друг другу.
Новым в Chrome 120 является поддержка атрибута name
в элементах <details>
. При использовании этого атрибута несколько элементов <details>
, имеющих одинаковое значение name
образуют семантическую группу. Одновременно может быть открыт не более одного элемента в группе: при открытии одного из элементов <details>
из группы ранее открытый автоматически закроется. Этот тип аккордеона называется эксклюзивным аккордеоном .
Элементы <details>
, являющиеся частью эксклюзивного аккордеона, не обязательно должны быть родственными. Их можно разбросать по документу.
За последние несколько лет, особенно в 2023 году, CSS пережил настоящий ренессанс. Если вы новичок в CSS или просто хотите освежить знания в основах, посетите наш бесплатный курс «Изучение CSS» и другие бесплатные курсы, предлагаемые на веб-сайте. .dev.
Мы желаем вам счастливых праздников и надеемся, что у вас скоро появится возможность включить некоторые из этих замечательных новых функций CSS и пользовательского интерфейса в свою работу!
⇾ Команда разработчиков Chrome UI,