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

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

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

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

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

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

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

Демонстрация начальной буквы

Узнайте больше о initial-letter .

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

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

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

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

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

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

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

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

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

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

Функция color-mix() может рассматриваться как момент времени в градиенте. Градиент показывает все этапы перехода от синего к белому, а color-mix() — только один этап. Всё становится сложнее, когда вы начинаете учитывать цветовые пространства и понимаете, насколько сильно смешивание цветов может отличаться от результатов.

Узнайте больше о color-mix() .

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

Относительный цветовой синтаксис (RCS) — это дополнительный метод к color-mix() для создания цветовых вариантов. Он немного мощнее color-mix(), но также представляет собой другую стратегию работы с цветом. color-mix() может подмешивать белый цвет для осветления цвета, при этом RCS предоставляет точный доступ к каналу яркости и возможность использовать calc() для программного уменьшения или увеличения яркости.

RCS позволяет выполнять относительные и абсолютные манипуляции с цветом. Относительное изменение — это изменение текущего значения насыщенности или яркости с помощью функции calc() . Абсолютное изменение — это замена значения канала на совершенно новое, например, установка непрозрачности на 50%. Этот синтаксис предоставляет вам эффективные инструменты для работы с темами, создания вариаций JIT-режимов и многого другого.

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

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

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

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

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

Запросы контейнера стилей

Запросы стилей частично реализованы в 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> , на который в данный момент наведен курсор.

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

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

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

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

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

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

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

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

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

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

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

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

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

Узнайте больше о @media (prefers-reduced-transparency) .

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

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

В основе 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 обеспечивает идеально синхронизированное событие scrollend, которое определяет, находится ли пользователь в процессе выполнения жеста или нет.

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

Узнайте больше о scrollend .

Анимации с прокруткой

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

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

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

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

Наложение

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

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

Поповер

API Popover позволяет создавать элементы, которые располагаются поверх остальной части страницы. К ним могут относиться меню, элементы выбора и всплывающие подсказки. Вы можете создать простой всплывающий элемент, добавив атрибут popover и id всплывающего элемента, а затем связав его атрибут id с кнопкой вызова с помощью popovertarget="my-popover" . API Popover поддерживает:

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

Горизонтальные линии в выделенном

Ещё одно небольшое изменение HTML, появившееся в Chrome и Safari в этом году, — это возможность добавлять горизонтальные линейки (теги <hr> ) в элементы <select> для визуального разделения контента. Раньше добавление тега <hr> в элемент select просто не отображалось. Но в этом году и Safari, и Chrome поддерживают эту функцию, что позволяет лучше разделять контент внутри элементов <select> .

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

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

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

:допустимые и недопустимые псевдоклассы пользователя

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

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

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

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

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

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

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