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

В 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-писателей и переводчиков от попыток создать копию проекта, которая «вписывается» в макет. С помощью подсетки макет можно настроить в соответствии с содержимым.

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

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

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

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

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

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

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

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

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

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

Цветовые пространства 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%. Этот синтаксис предоставляет вам содержательные инструменты для создания тем, временных вариантов и многого другого.

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

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

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

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

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

Поповер

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

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

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

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

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