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

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

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

В 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 в качестве значения для строк сетки или столбцов.

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

Узнайте больше о подгиде .

Начальный буква

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

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

Начальная демо

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

Текст-блап: баланс и красивая

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

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

Узнайте больше о Text-WRAP: баланс .

HD Color Spaces (уровень 4).

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

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

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

Функция цветов

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

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

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

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

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

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

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

Размер контейнер запросов

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

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

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

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

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

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

Узнайте больше о @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, вы можете контролировать то, что получается, и, необязательно настроить, как должны быть анимированы эти снимки.

View Transitions API для одностраничных приложений, поставляемых в Chrome 111. Узнайте больше о переходах просмотра .

Линейная функция

Не позволяйте имени этой функции обмануть вас. Функция linear() (не должна быть запутана с linear ключевым словом) позволяет вам простым создавать сложные функции смягчения с компромиссом потери некоторой точности.

Перед linear() , который поставлялся в Chrome 113, было невозможно создать эффекты отскока или пружины в CSS. Благодаря linear() можно аппроксимировать эти смягчения, упростив их до ряда точек, а затем линейно интерполируя между этими точками.

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

Прокрутите конец

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

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

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

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

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

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

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

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

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

@Стартовый стиль

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

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

Наложение

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

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

Попвер

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

• Продвижение до верхнего слоя. Поповерчики появятся на отдельном слое над остальной частью страницы, поэтому вам не нужно играть с Z-индексом.
• Функциональность Light-Dismiss. Нажатие за пределы области Поповер закроет Popover и вернет фокус.
• Управление фокусом по умолчанию. Открытие Поповер делает следующую вкладку остановки внутри Поповер.
• Доступные привязки клавиатуры. Нажатие на ключ esc или двойное переключение закроет Popover и вернет фокус.
• Доступные привязки компонентов. Соединение поп -элемента к пусковому триггеру Попвер семантически.

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

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

Выберите скриншот

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

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

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

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

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

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

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

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

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

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