CSS в упаковке: 2023 год!
Перейти к содержимому:
- Адаптивный дизайн
- Контейнерные запросы
- Запросы стиля
- : есть селектор
- Обновить медиа-запрос
- Скрипт медиа-запроса
- Медиа-запрос прозрачности
Ух ты! 2023 год был огромным годом для CSS!
От #Interop2023 до множества новых направлений в области CSS и пользовательского интерфейса, которые предоставляют разработчикам возможности, которые раньше считались невозможными на веб-платформе. Теперь каждый современный браузер поддерживает запросы к контейнерам, подсетку, селектор :has()
и множество новых цветовых пространств и функций . В Chrome поддерживается анимация прокрутки, основанная только на CSS, а также плавная анимация между веб-представлениями с помощью переходов между представлениями . И в довершение ко всему, появилось так много новых примитивов, которые стали более удобными для разработчиков, например вложенность CSS и стили с ограниченной областью действия .
Какой это был год! И поэтому мы хотели бы завершить этот знаменательный год, отмечая и признавая всю тяжелую работу разработчиков браузеров и веб-сообщества, которая сделала все это возможным.
Архитектурные основы
Начнем с обновлений основного языка и возможностей CSS. Это функции, которые лежат в основе создания и организации стилей и придают разработчику огромные возможности.
Тригонометрические функции
В Chrome 111 добавлена поддержка тригонометрических функций sin()
, cos()
, tan()
, asin()
, acos()
, atan()
и atan2()
, что делает их доступными во всех основных движках. Эти функции очень удобны для анимации и макетирования. Например, теперь гораздо проще размещать элементы по кругу вокруг выбранного центра.
Узнайте больше о тригонометрических функциях в CSS .
Сложный выбор nth-*
Поддержка браузера
С помощью селектора псевдокласса :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
Узнайте больше о @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, которая задает стиль размещения начальных букв. Вы можете расположить буквы как в опущенном, так и в поднятом состоянии. Свойство принимает два аргумента: первый для того, насколько глубоко опустить букву в соответствующий абзац, и второй для того, насколько сильно поднять букву над ним. Вы даже можете комбинировать оба варианта, как показано в следующей демонстрации.
Скриншот начальной буквы
Демо с начальной буквой
Узнайте больше о начальной букве .
перенос текста: баланс и красота
Как разработчик, вы не знаете окончательный размер, размер шрифта или даже язык заголовка или абзаца. Все переменные, необходимые для эффективного и эстетичного переноса текста, находятся в браузере. Поскольку браузер знает все факторы, такие как размер шрифта, язык и выделенную область, он является отличным кандидатом для обработки расширенного и высококачественного макета текста.
Здесь на помощь приходят два новых метода переноса текста: один называется 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)
.
Скриншот запроса стиля
Демонстрация запроса стиля
Хотя это похоже на использование имен классов в CSS, запросы стилей имеют некоторые преимущества. Во-первых, с помощью запросов стиля вы можете обновлять значение в CSS по мере необходимости для псевдосостояний. Кроме того, в будущих версиях реализации вы сможете запрашивать диапазоны значений, чтобы определить примененный стиль, например style(60 <= --weather <= 70)
и стиль на основе пар свойство-значение, например style(font-style: italic)
.
Узнайте больше об использовании запросов стиля .
:has() селектор
На протяжении почти 20 лет разработчики просили о «родительском селекторе» в CSS. Теперь это возможно с помощью селектора :has()
поставляемого в Chrome 105. Например, использование .card:has(img.hero)
выберет элементы .card
, у которых есть дочернее изображение героя.
:has() Скриншот демо
:has() Живая демонстрация
Поскольку :has()
принимает в качестве аргумента относительный список селекторов, вы можете выбрать гораздо больше, чем родительский элемент. Используя различные комбинаторы CSS, можно не только перемещаться вверх по дереву DOM, но и делать боковой выбор. Например, li:has(+ li:hover)
выберет элемент <li>
, который предшествует текущему наведенному элементу <li>
.
: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 .
Функция линейного замедления
Поддержка браузера
Не позволяйте названию этой функции ввести вас в заблуждение. Функция linear()
(не путать с ключевым словом linear
) позволяет создавать сложные функции плавности простым способом, но при этом теряется некоторая точность.
До появления linear()
, который появился в Chrome 113, в CSS было невозможно создавать эффекты отскока или пружины. Благодаря 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
с этим именем, что дает ей более широкую область применения. При этом любой дочерний элемент этого общего родителя может использовать временную шкалу с этим именем.
Демо-скринкаст
Живая демонстрация
Узнайте больше о 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
:действительные и недействительные псевдоклассы
Стабильные во всех браузерах в этом году, :user-valid
и :user-invalid
ведут себя аналогично псевдоклассам :valid
и :invalid
, но соответствуют элементу управления формы только после того, как пользователь существенно взаимодействовал с вводом. Обязательный и пустой элемент управления формы будет соответствовать :invalid
даже если пользователь еще не начал взаимодействовать со страницей. Тот же элемент управления не будет соответствовать :user-invalid
до тех пор, пока пользователь не изменит ввод и не оставит его в недопустимом состоянии.
Благодаря этим новым селекторам больше нет необходимости писать код с сохранением состояния, чтобы отслеживать вводимые пользователем изменения.
:user-* Скринкаст
:user-* Живая демонстрация
Узнайте больше об использовании псевдоэлементов проверки формы user-* .
Эксклюзивный аккордеон
Поддержка браузера
Распространенным шаблоном пользовательского интерфейса в Интернете является компонент «аккордеон». Чтобы реализовать этот шаблон, вы объединяете несколько элементов <details>
, часто визуально группируя их, чтобы указать, что они принадлежат друг другу.
Новым в Chrome 120 является поддержка атрибута name
в элементах <details>
. При использовании этого атрибута несколько элементов <details>
, имеющих одинаковое значение name
, образуют семантическую группу. Одновременно может быть открыт не более одного элемента в группе: при открытии одного из элементов <details>
из группы ранее открытый автоматически закроется. Этот тип аккордеона называется эксклюзивным аккордеоном .
Элементы <details>
, являющиеся частью эксклюзивного аккордеона, не обязательно должны быть родственными. Их можно разбросать по документу.
За последние несколько лет, особенно в 2023 году, CSS пережил настоящий ренессанс. Если вы новичок в CSS или просто хотите освежить знания в основах, посетите наш бесплатный курс «Изучение CSS» и другие бесплатные курсы, предлагаемые на веб-сайте. .dev.
Мы желаем вам счастливых праздников и надеемся, что у вас скоро появится возможность включить некоторые из этих замечательных новых функций CSS и пользовательского интерфейса в свою работу!
⇾ Команда разработчиков Chrome UI,
,CSS в упаковке: 2023 год!
Перейти к содержимому:
- Адаптивный дизайн
- Контейнерные запросы
- Запросы стиля
- : есть селектор
- Обновить медиа-запрос
- Скрипт медиа-запроса
- Медиа-запрос прозрачности
Ух ты! 2023 год был огромным годом для CSS!
От #Interop2023 до множества новых направлений в области CSS и пользовательского интерфейса, которые предоставляют разработчикам возможности, которые раньше считались невозможными на веб-платформе. Теперь каждый современный браузер поддерживает запросы к контейнерам, подсетку, селектор :has()
и множество новых цветовых пространств и функций . В Chrome поддерживается анимация прокрутки, основанная только на CSS, а также плавная анимация между веб-представлениями с помощью переходов между представлениями . И в довершение ко всему, появилось так много новых примитивов, которые стали более удобными для разработчиков, например вложенность CSS и стили с ограниченной областью действия .
Какой это был год! И поэтому мы хотели бы завершить этот знаменательный год, отмечая и признавая всю тяжелую работу разработчиков браузеров и веб-сообщества, которая сделала все это возможным.
Архитектурные основы
Начнем с обновлений основного языка и возможностей CSS. Это функции, которые лежат в основе создания и организации стилей и придают разработчику огромные возможности.
Тригонометрические функции
В Chrome 111 добавлена поддержка тригонометрических функций sin()
, cos()
, tan()
, asin()
, acos()
, atan()
и atan2()
, что делает их доступными во всех основных движках. Эти функции очень удобны для анимации и макетирования. Например, теперь гораздо проще размещать элементы по кругу вокруг выбранного центра.
Узнайте больше о тригонометрических функциях в CSS .
Комплекс Nth-* Выбор
Поддержка браузера
С отключением псевдокласса :nth-child()
можно выбрать элементы в DOM по их индексу. Используя микросинтаксис An+B
вы получаете точный контроль над тем, какие элементы вы хотите выбрать.
По умолчанию :nth-*()
псевдо учитывают все детские элементы. На сфере Chrome 111 вы можете, при желании, передать список селекторов в :nth-child()
и :nth-last-child()
. Таким образом, вы можете предварительно сформировать список детей, прежде чем An+B
делает свое дело.
В следующей демонстрации логика 3n+1
применяется только к небольшим куклам путем предварительного срока их с помощью of .small
. Используйте раскрывающиеся списки, чтобы динамически изменить используемый селектор.
Узнайте больше о комплексе NTH-* Выбора .
Объем
Chrome 118 добавил поддержку @scope
, ATRULE, который позволяет вам селектор, соответствующим конкретному подборе документа. С помощью стиля Scoped вы можете быть очень конкретными относительно того, какие элементы вы выбираете, без необходимости писать чрезмерно специфические селекторы или тесно связать их со структурой 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
, чтобы ограничить охват ваших селекторов» . В этой статье вы узнаете о :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
в качестве значения для строк сетки или столбцов.
Subgred Screencast
Подсказание живой демонстрации
Subgrid особенно полезен для выравнивания братьев и сестер с динамическим содержанием друг друга. Это освобождает копирайтеров, авторов UX и переводчиков от попыток создать копию проекта, которая «вписывается» в макет. С помощью Subgrid макет может быть отрегулирован так, чтобы соответствовать контенту.
Узнайте больше о подгиде .
Типография
Веб-типография увидела несколько обновлений ключей в 2023 году. Особенно приятным прогрессивным улучшением является свойство text-wrap
. Это свойство обеспечивает настройку типографической макета, составленной в браузере без необходимости дополнительных сценариев. Попрощайтесь с неловкой длиной линий и привет более предсказуемой типографии!
Начальный буква
Приземление в начале года в Chrome 110, свойство initial-letter
представляет собой небольшую, но мощную функцию CSS, которая устанавливает стиль для размещения начальных букв. Вы можете позиционировать буквы либо в выпущенном, либо в поднятом состоянии. Собственность принимает два аргумента: первое, как глубоко бросить письмо в соответствующий абзац, а во -вторых, сколько, чтобы поднять букву над ней. Вы даже можете сделать комбинацию обоих, например, в следующей демонстрации.
Скриншот начальной буквы
Начальная демо
Узнайте больше о начальном буквах .
Текст-блап: баланс и красивая
Как разработчик, вы не знаете окончательного размера, размера шрифта или даже языка заголовка или абзаца. Все переменные, необходимые для эффективной и эстетической обработки текста, находятся в браузере. Поскольку браузер знает все факторы, такие как размер шрифта, язык и выделенная область, он делает его отличным кандидатом для обработки расширенного и высококачественного текстового макета.
Именно здесь появляются две новые методы обертывания текста, одна под названием balance
, а другой - pretty
. Значение balance
направлена на создание гармоничного блока текста, в то время как pretty
стремится предотвратить сирот и обеспечить здоровую гифенацию. Обе эти задачи традиционно выполнялись вручную, и удивительно отдать работу в браузер и работать на любом переведенном языке.
Текст-вводный скринкаст
Текст-вживую в прямом эфире
Узнайте больше о Text-WRAP: баланс .
Цвет
2023 год был годом цвета для веб -платформы. С новыми цветными пространствами и функциями, которые обеспечивают динамическое цветовое тематическое значение, ничто не мешает вам создать яркие, пышные темы, которые заслуживают ваши пользователи, и сделать их настраиваемыми!
HD Color Spaces (уровень 4).
От аппаратного обеспечения до программного обеспечения, CSS до мигающих огней; Нашим компьютерам может потребоваться много работы, чтобы попытаться представлять цвета, столь же хорошо, как могут видеть наши человеческие глаза. В 2023 году у нас есть новые цвета, больше цветов, новые цветные пространства, цветовые функции и новые возможности.
CSS и цвет теперь могут: - Проверьте, способно ли аппаратное обеспечение для экрана пользователей широко гамму HDR Colors. - Проверьте, понимает ли браузер пользователя синтаксис цвета, например, Oklch или отображение P3. - Укажите цвета HDR в Оклабе, Оклч, HWB, дисплей P3, Rec.2020, XYZ и многое другое. - Создайте градиенты с цветами HDR, - градиенты интерполяции в альтернативных цветовых пространствах. - Смешайте цвета с color-mix()
. - Создать цветовые варианты с относительным цветным синтаксисом.
Цвет 4 скринкаст
Цвет 4 Демо
Узнайте больше о цвете 4 и цветных пространствах .
Функция цветов
Смешивающий цвет - это классическая задача, и в 2023 году CSS тоже может сделать это. Вы можете не только смешать белый или черный с цветом, но и прозрачность, и сделать все это в любом цветовом пространстве по вашему выбору. Это одновременно основная функция цвета и расширенная функция цвета.
Color-Mix () Screencast
Color-Mix () Демо
Вы можете думать о color-mix()
как момент времени от градиента. Там, где градиент показывает все шаги, необходимые для того, чтобы перейти от синего к белому, color-mix()
показывает только один шаг. Все становится продвинутыми, как только вы начинаете учитывать цветные места, и узнаете, насколько отличается цветовое пространство, к результатам.
Узнайте больше о цветовой миксе () .
Относительный синтаксис цвета
Относительный синтаксис цвета (RCS)-это дополнительный метод для color-mix()
для создания цветовых вариантов. Он немного более мощный, чем цветная микс (), но также и другая стратегия для работы с цветом. color-mix()
может смешиваться в цвете белого цвета, чтобы осветить цвет, где RCS дает точный доступ к каналу легкости и возможность использовать calc()
на канале, чтобы программно уменьшить или увеличить легкость.
RCS Screencast
RCS Live Demo
RCS позволяет вам выполнять относительные и абсолютные манипуляции с цветом. Относительное изменение - это то, где вы принимаете текущее значение насыщения или легкость и модифицируете его с помощью calc()
. Абсолютное изменение - это то, что вы заменяете значение канала на совершенно новый, например, установление непрозрачности до 50%. Этот синтаксис дает вам значимые инструменты для темы, только во времени варианты и многое другое.
Узнайте больше об относительном синтаксисе цвета .
Отзывчивый дизайн
Адаптивный дизайн развивался в 2023 году. Этот новаторский год позволил создать новые функции, которые полностью изменили способ создания отзывчивых веб-опыта, и открыли новую модель адаптивного дизайна на основе компонентов. Комбинация запросов контейнеров и :has()
поддерживает компоненты, которые владеют их отзывчивым и логическим стилем в зависимости от размера их родителей, а также наличия или состояния любого из их детей. Это означает, что вы, наконец, можете отделить макет на уровне страницы от макета на уровне компонентов и один раз написать логику, чтобы использовать свой компонент повсюду!
Размер контейнер запросов
Вместо того, чтобы использовать информацию о глобальном размере Viewport для применения стилей CSS, запросы контейнеров поддерживают запросы родительского элемента на странице. Это означает, что компоненты могут быть динамично стиливаться по нескольким макетам и в нескольких видах. Запросы контейнера по размеру стали стабильными во всех современных браузерах в День святого Валентина в этом году (14 февраля).
Чтобы использовать эту функцию, сначала настройте сдерживание на элементе, который вы запрашиваете, а затем, аналогично медиа -запросу, используйте @container
с параметрами размера для применения стилей. Наряду с вопросами контейнеров вы получаете размер запросов контейнеров. В следующей демонстрации cqi
размер контейнера (представляющий размер встроенного контейнера) используется для размера заголовка карты.
@container Screencast
@container demo
Узнайте больше об использовании контейнерных запросов .
Стиль -контейнер запросов
Запросы в стиле приземляются с частичной реализацией в Chrome 111. С запросами в стиле в настоящее время вы можете запросить значение пользовательских свойств на родительском элементе при использовании @container style()
. Например, запрос, существует ли значение пользовательского значения свойства или устанавливается на определенное значение, например, @container style(--rain: true)
.
Стиль запроса скриншот
Стиль Демо Демо
Хотя это звучит похоже на использование имен классов в CSS, запросы в стиле имеют некоторые преимущества. Во -первых, с помощью запросов в стиле вы можете обновить значение в CSS по мере необходимости для псевдо. Кроме того, в будущих версиях реализации вы сможете запросить диапазоны значений, чтобы определить применяемый стиль, такой как style(60 <= --weather <= 70)
, и стиль на основе пары стоимости свойств, таких как style(font-style: italic)
.
Узнайте больше об использовании запросов в стиле .
: есть () селектор
В течение почти 20 лет разработчики просили «селектор родителей» в CSS. С помощью :has()
селектор, который отправил в Chrome 105, теперь это возможно. Например, использование .card:has(img.hero)
выберет элементы .card
, которые имеют образ героя в детстве.
: имеет () демонстрационный скриншот
: имеет () живую демонстрацию
Поскольку :has()
принимает список относительных селекторов в качестве аргумента, вы можете выбрать гораздо больше, чем родительский элемент. Используя различные комбинаторы CSS, можно не только подняться на дерево DOM, но и сделать выбор в сторону. Например, li:has(+ li:hover)
выберет элемент <li>
, который предшествует в настоящее время зависел от элемента <li>
.
: имеет () скринкаст
: имеет () демо
Узнайте больше о CSS :has()
селектор .
Обновление медиа -запроса
update
медиа -запроса дает вам возможность адаптировать пользовательский интерфейс к скорости обновления устройства. Эта функция может сообщить о значении fast
, slow
или none
, которое связано с возможностями различных устройств.
Большинство устройств, на которые вы проектируете, вероятно, будут быстро обновлять. Это включает в себя настольные компьютеры и большинство мобильных устройств. Эрдеры и устройства, такие как платежные системы с низким содержанием питания, могут иметь медленную ставку обновления. Зная, что устройство не может обрабатывать анимацию или частые обновления, означает, что вы можете сохранить использование батареи или неисправные обновления просмотра.
Обновить Screencast
Обновить демонстрацию
Узнайте больше о @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 лежит функция document.startViewTranstion
. Пропустите функцию, которая обновляет DOM в новое состояние, и API позаботится обо всем для вас. Это происходит, взяв до и после снимка, затем переходя между ними. Используя CSS, вы можете контролировать то, что получается, и, необязательно настроить, как должны быть анимированы эти снимки.
VT Screencast
VT Демо
View Transitions API для одностраничных приложений, поставляемых в Chrome 111. Узнайте больше о переходах просмотра .
Линейная функция
Поддержка браузера
Не позволяйте имени этой функции обмануть вас. Функция linear()
(не должна быть запутана с linear
ключевым словом) позволяет вам простым создавать сложные функции смягчения с компромиссом потери некоторой точности.
Перед linear()
, который поставлялся в Chrome 113, было невозможно создать эффекты отскока или пружины в CSS. Благодаря linear()
можно аппроксимировать эти смягчения, упростив их до ряда точек, а затем линейно интерполируя между этими точками.
Скрикаст линейного вещания
Линейная демонстрация
Узнайте больше о linear()
. Для создания кривых linear()
используйте линейный генератор смягчения .
Прокрутите конец
Многие интерфейсы включают в себя взаимодействия прокрутки, а иногда интерфейс должен синхронизировать информацию, относящуюся к текущей позиции прокрутки, или извлечение данных на основе текущего состояния. Перед событием scrollend
вам пришлось использовать неточный метод тайм -аута, который мог стрелять, пока палец пользователя все еще был на экране. С событием scrollend
у вас есть идеальное время прокрутки, которое понимает, является ли пользователь по -прежнему середины жеста или нет.
Прокрутка скрикала
Прокрутка демонстрации
Для браузера это было важно, потому что JavaScript не может отслеживать присутствие пальцев на экране во время прокрутки, информация просто недоступна. Куски неточного конца прокрутки, пытаясь, теперь можно удалить и заменить на браузер, принадлежащий высокоточному событию.
Узнайте больше о Scrollend .
Анимация, управляемая свитками
Анимация, управляемая прокруткой,-это захватывающая функция, доступная от Chrome 115. Они позволяют вам взять существующую анимацию CSS или анимацию, созданную с помощью API веб-анимации , и соединить ее с смещением свитка. Когда вы прокручиваете вверх и вниз - или влево и вправо в горизонтальном свисто, - связанная анимация будет вычитывать вперед и назад в прямом ответе.
С помощью Scrolltimeline вы можете отслеживать общий прогресс прокрутки, как показано в следующей демонстрации. Когда вы прокручиваете до конца страницы, текст раскрывает себя символом.
SDA Screencast
SDA Демо
С помощью Viewtimeline вы можете отслеживать элемент, когда он пересекает Scrollport. Это работает аналогично тому, как recsectionObserver отслеживает элемент. В следующей демонстрации каждое изображение показывает себя с момента, когда оно входит в Scrollport, пока он не окажется в центре.
SDA демонстрация Screencast
SDA Live Demo
Поскольку анимация, основанные на прокрутках, работают с CSS Animations и API веб-анимации, вы можете извлечь выгоду из всех преимуществ, которые приносят эти API. Это включает в себя способность, чтобы эти анимации работали от основного потока. Теперь вы можете иметь шелковистую гладкую анимацию, управляемая прокруткой, избавляя от основного потока с несколькими линиями дополнительного кода - что не нравится?
Чтобы узнать больше о анимациях, управляемой прокрутками, ознакомьтесь с этой статьей со всеми деталями или посетите прокрутки, управляемые анимациями.
Отложенное вложение сроки
При нанесении анимации, управляемой свитками, через CSS, механизм поиска, чтобы найти управляющий прокрутки, всегда поднимает дерево DOM, что делает его ограниченным только предками прокрутки. Однако очень часто элемент, который должен быть анимирован, является не ребенком свинца, а элементом, расположенным в совершенно другой поддере.
Чтобы позволить анимированному элементу найти именованную прокрутку, не являющегося сунфильдом, используйте свойство timeline-scope
на общем родителе. Это позволяет прикрепить к нему определенную scroll-timeline
или view-timeline
с этим именем, придавая ему более широкую область. При этом любой ребенок этого общего родителя может использовать временную шкалу с таким именем.
Демонстрация экрана
Живая демонстрация
Узнайте больше о timeline-scope
.
Дискретная анимация имущества
Еще одна новая способность в 2023 году - это возможность анимировать дискретную анимацию, такую как анимирование на display: none
. Из Chrome 116 вы можете использовать display
и content-visibility
в правилах ключевых кафедров. Вы также можете перенести любое дискретное свойство в точке 50%, а не в точке 0%. Это достигается с помощью свойства transition-behavior
с использованием ключевого слова allow-discrete
или в свойстве transition
в качестве сокращения.
Дискретная анимация. Скрикаст
Дискретная анимация. Демо
Узнайте больше о переходе дискретной анимации .
@Стартовый стиль
Поддержка браузера