Обернутый CSS: 2023!, Обернутый CSS: 2023!, Обернутый CSS: 2023!

CSS в упаковке: 2023 год!

Перейти к содержимому:

• Архитектурные основы
• Тригонометрические функции
• Сложный выбор nth-*
• Объем
• Вложение

• Типография
• Начальная буква
• Перенос текста баланс/красиво

• Цвет
• Уровень цвета 4
• Функция смешивания цветов
• Относительный синтаксис цвета

• Адаптивный дизайн
• Контейнерные запросы
• Запросы стиля
• : есть селектор
• Обновить медиа-запрос
• Скрипт медиа-запроса
• Медиа-запрос прозрачности

• Взаимодействие
• Просмотр переходов
• Функция линейного замедления
• Прокрутка
• Анимация, управляемая прокруткой
• Отложенное прикрепление к временной шкале
• Дискретные переходы свойств
• Правило стартового стиля
• Наложение анимации

• Компоненты
• Поповер
• Часы в выборе
• Допустимые/недействительные псевдоклассы пользователя
• Эксклюзивный аккордеон

Ух ты! 2023 год был огромным годом для CSS!

От #Interop2023 до множества новых направлений в области CSS и пользовательского интерфейса, которые предоставляют разработчикам возможности, которые раньше считались невозможными на веб-платформе. Теперь каждый современный браузер поддерживает запросы к контейнерам, подсетку, селектор :has() и множество новых цветовых пространств и функций . В Chrome поддерживается анимация прокрутки, основанная только на CSS, а также плавная анимация между веб-представлениями с помощью переходов между представлениями . И в довершение ко всему, появилось так много новых примитивов, которые стали более удобными для разработчиков, например вложенность CSS и стили с ограниченной областью действия .

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

Обратите внимание на новые значки Baseline рядом с заголовками функций! Узнайте больше здесь.

• = Новое, доступное во всех стабильных версиях основных браузеров.

• = Частичная доступность в основных браузерах.

Архитектурные основы

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

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

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

• 111
• 111
• 108
• 15,4

Источник

В 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-*

Узнайте больше о сложных выборках nth-* .

Объем

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

• 118
• 118
• 
• 17,4

Источник

В 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

CSS @scope демо

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

Вложение

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

• 120
• 120
• 117
• 17.2

Источник

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

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 */
}

Вложение скринкаста

Вложение живой демонстрации

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

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

Узнайте больше о вложении .

Подсетка

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

• 117
• 117
• 71
• 16

Источник

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

Скринкаст подсетки

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

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

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

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

Типография

В 2023 году веб-типографика претерпела несколько ключевых обновлений. Особенно приятным прогрессивным улучшением является свойство text-wrap . Это свойство позволяет настраивать типографский макет, созданный в браузере, без необходимости создания дополнительных сценариев. Попрощайтесь с неудобной длиной строк и здравствуйте более предсказуемой типографикой!

Начальная буква

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

• 110
• 110
• х
• 9

Источник

Свойство initial-letter появившееся в начале года в Chrome 110, представляет собой небольшую, но мощную функцию CSS, которая задает стиль размещения начальных букв. Вы можете расположить буквы как в опущенном, так и в поднятом состоянии. Свойство принимает два аргумента: первый для того, насколько глубоко опустить букву в соответствующий абзац, и второй для того, насколько сильно поднять букву над ним. Вы даже можете комбинировать оба варианта, как показано в следующей демонстрации.

Скриншот начальной буквы

Демо с начальной буквой

Измените значения initial-letter псевдоэлемента ::first-letter чтобы увидеть ее сдвиг.

Узнайте больше о начальной букве .

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

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

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

Перенос текста

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

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

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

Цвет

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

Цветовые пространства HD (уровень цвета 4)

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

• 111
• 111
• 113
• 15

Источник

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

• 111
• 111
• 113
• 15

Источник

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

CSS и цвет теперь могут: — Проверить, поддерживает ли оборудование экрана пользователя передачу цветов HDR с широкой гаммой. – Проверьте, понимает ли браузер пользователя синтаксис цветов, например Oklch или Display P3. - Укажите цвета HDR в Oklab, Oklch, HWB, Display P3, Rec.2020, XYZ и других. - Создавайте градиенты с цветами HDR. - Интерполируйте градиенты в альтернативных цветовых пространствах. - Смешивайте цвета с помощью color-mix() . - Создавайте варианты цвета с относительным синтаксисом цвета.

Цветной скринкаст 4

Цвет 4 Демо

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

Узнайте больше о Color 4 и цветовых пространствах .

функция смешивания цветов

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

• 111
• 111
• 113
• 16.2

Источник

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

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

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

• 105
• 105
• 110
• 16

Источник

Вместо использования информации о глобальном размере области просмотра для применения стилей CSS контейнерные запросы поддерживают запрос родительского элемента на странице. Это означает, что компоненты могут быть стилизованы динамически в нескольких макетах и ​​в нескольких представлениях. Запросы контейнеров на размер стали стабильными во всех современных браузерах в День святого Валентина в этом году (14 февраля).

Чтобы использовать эту функцию, сначала настройте включение элемента, к которому вы запрашиваете, а затем, аналогично медиа-запросу, используйте @container с параметрами размера, чтобы применить стили. Наряду с запросами контейнеров вы получаете размеры запросов контейнеров. В следующей демонстрации размер запроса контейнера cqi (представляющий размер встроенного контейнера) используется для определения размера заголовка карты.

@container Скринкаст

@container Демо

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

Стиль запросов к контейнеру

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

• 111
• 111
• х
• 18

Источник

Запросы стиля частично реализованы в Chrome 111. В настоящее время запросы стиля позволяют запрашивать значения пользовательских свойств родительского элемента при использовании @container style() . Например, запросите, существует ли значение пользовательского свойства или установлено ли ему определенное значение, например @container style(--rain: true) .

Скриншот запроса стиля

Демонстрация запроса стиля

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

Хотя это похоже на использование имен классов в CSS, запросы стилей имеют некоторые преимущества. Во-первых, с помощью запросов стиля вы можете обновлять значение в CSS по мере необходимости для псевдосостояний. Кроме того, в будущих версиях реализации вы сможете запрашивать диапазоны значений, чтобы определить примененный стиль, например style(60 <= --weather <= 70) и стиль на основе пар свойство-значение, например style(font-style: italic) .

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

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

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

• 105
• 105
• 121
• 15,4

Источник

На протяжении почти 20 лет разработчики просили о «родительском селекторе» в CSS. Теперь это возможно с помощью селектора :has() поставляемого в Chrome 105. Например, использование .card:has(img.hero) выберет элементы .card , у которых есть дочернее изображение героя.

:has() Скриншот демо

:has() Живая демонстрация

CSS :has() демо: карта без изображения или с изображением

Поскольку :has() принимает в качестве аргумента относительный список селекторов, вы можете выбрать гораздо больше, чем родительский элемент. Используя различные комбинаторы CSS, можно не только перемещаться вверх по дереву DOM, но и делать боковой выбор. Например, li:has(+ li:hover) выберет элемент <li> , который предшествует текущему наведенному элементу <li> .

:has() Скринкаст

:has() Демо

Демо CSS :has() : док-станция

Узнайте больше о селекторе CSS :has() .

Обновить медиа-запрос

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

• 113
• 113
• 102
• 17

Источник

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

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

Обновить скринкаст

Обновить демо-версию

Смоделируйте (выбрав опцию радио) значение скорости обновления и посмотрите, как оно повлияет на утку.

Узнайте больше о @media (обновление) .

Скрипт медиа-запроса

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

• 120
• 120
• 113
• 17

Источник

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

Узнайте, как включить и отключить JavaScript на странице для тестирования с помощью Chrome DevTools здесь .

Сценарий скринкаста

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

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

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

Медиа-запрос с пониженной прозрачностью

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

• 118
• 118
• 
• х

Источник

Непрозрачные интерфейсы могут вызвать головную боль или стать проблемой при различных нарушениях зрения. Вот почему в Windows, macOS и iOS есть системные настройки, которые могут уменьшить или удалить прозрачность пользовательского интерфейса. Этот медиа-запрос для prefers-reduced-transparency хорошо сочетается с другими медиа-запросами с предпочтениями, которые позволяют вам проявлять творческий подход, а также приспосабливаться к пользователям.

Скринкаст с пониженной прозрачностью

Демонстрация пониженной прозрачности

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

Узнайте больше о @media (предпочитает пониженную прозрачность) .

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

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

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

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

• 111
• 111
• х
• 18

Источник

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

Скринкаст с линейным замедлением

Демонстрация линейного замедления

Демонстрация CSS linear() .

Узнайте больше о linear() . Чтобы создать кривые linear() , используйте генератор линейного замедления .

Конец прокрутки

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

• 114
• 114
• 109
• х

Источник

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

Скринкаст с прокруткой

Прокрутка Демо

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

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

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

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

• 115
• 115
• 
• х

Источник

Анимация, управляемая прокруткой, — это замечательная функция, доступная в Chrome 115. Она позволяет вам взять существующую анимацию CSS или анимацию, созданную с помощью API веб-анимации , и связать ее со смещением прокрутки скроллера. Когда вы прокручиваете вверх и вниз (или влево и вправо при горизонтальной прокрутке), связанная анимация будет перемещаться вперед и назад в прямом ответе.

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

Скринкаст ПДД

Демо-версия ПДД

Демонстрация CSS-анимации с прокруткой: временная шкала прокрутки

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

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

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

Демонстрация CSS-анимации с прокруткой: просмотреть временную шкалу

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

Чтобы узнать больше об анимации, управляемой прокруткой , прочтите эту статью со всеми подробностями или посетите сайт Scroll-driven-animations.style , который включает множество демонстраций.

Отложенное прикрепление к временной шкале

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

• 116
• 116
• х
• х

Источник

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

Чтобы позволить анимированному элементу найти именованную временную шкалу прокрутки не-предка, используйте свойство timeline-scope общего родительского элемента. Это позволяет прикрепить к нему определенную scroll-timeline или view-timeline с этим именем, что дает ей более широкую область применения. При этом любой дочерний элемент этого общего родителя может использовать временную шкалу с этим именем.

Если timeline-scope объявлена ​​для общего родителя, scroll-timeline объявленная в скроллере, может быть найдена элементом, который использует ее в качестве animation-timeline

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

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

Демонстрация CSS-анимации с прокруткой: отложенное вложение временной шкалы

Узнайте больше о timeline-scope .

Анимация дискретных свойств

Еще одна новая возможность в 2023 году — возможность анимировать отдельные анимации, например анимацию на display: none . Начиная с Chrome 116, вы можете использовать display и content-visibility в правилах ключевых кадров. Вы также можете перенести любое дискретное свойство в точку 50%, а не в точку 0%. Это достигается с помощью свойства transition-behavior с использованием ключевого слова allow-discrete или свойства transition в качестве сокращенного обозначения.

Дискретная анимация. Скринкаст

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

Узнайте больше о переходе дискретной анимации .

@starting-style

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

• 117
• 117
• 129
• 17,5

Источник

Правило CSS @starting-style основано на новых веб-возможностях для анимации на display: none . Это правило позволяет придать элементу стиль «до открытия», который браузер сможет просмотреть до того, как элемент будет открыт на странице. Это очень полезно для анимации входа, а также для анимации таких элементов, как всплывающее окно или диалог. Это также может быть полезно в любой момент, когда вы создаете элемент и хотите предоставить ему возможность анимации. Возьмем следующий пример, который плавно анимирует атрибут popover (см. следующий раздел) в поле зрения и в верхнем слое снаружи. окно просмотра.

@starting-style Скринкаст

@starting-style Демо

Узнайте больше о @starting-style и других анимациях входа.

Наложение

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

• 117
• 117
• х
• х

Источник

К переходу можно добавить новое свойство CSS overlay , чтобы элементы со стилями верхнего слоя, такие как popover и dialog , могли плавно анимироваться из верхнего слоя. Если вы не наложите переход, ваш элемент немедленно снова станет обрезанным, преобразованным и закрытым, и вы не увидите, как произойдет переход. Аналогично, overlay позволяет ::backdrop плавно анимировать при добавлении к элементу верхнего слоя.

Наложение скринкаста

Наложение живой демонстрации

Узнайте больше о наложении и других анимациях выхода.

Компоненты

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

Поповер

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

• 114
• 114
• 125
• 17

Источник

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

:действительные и недействительные псевдоклассы

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

• 119
• 119
• 88
• 16,5

Источник

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

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

:user-* Скринкаст

:user-* Живая демонстрация

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

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

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

• 120
• 120
• 130
• 17.2

Распространенным шаблоном пользовательского интерфейса в Интернете является компонент «аккордеон». Чтобы реализовать этот шаблон, вы объединяете несколько элементов <details> , часто визуально группируя их, чтобы указать, что они принадлежат друг другу.

Новым в Chrome 120 является поддержка атрибута name в элементах <details> . При использовании этого атрибута несколько элементов <details> , имеющих одинаковое значение name , образуют семантическую группу. Одновременно может быть открыт не более одного элемента в группе: при открытии одного из элементов <details> из группы ранее открытый автоматически закроется. Этот тип аккордеона называется эксклюзивным аккордеоном .

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

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

Заключение

За последние несколько лет, особенно в 2023 году, CSS пережил настоящий ренессанс. Если вы новичок в CSS или просто хотите освежить знания в основах, посетите наш бесплатный курс «Изучение CSS» и другие бесплатные курсы, предлагаемые на веб-сайте. .dev.

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

⇾ Команда разработчиков Chrome UI,

Una Kravets

Bramus

Adam Argyle