Последние несколько месяцев открыли золотую эру веб UI (User Interface - пользовательский интерфейс).
Вот 20 самых захватывающих и впечатляющих возможностей, которые появились недавно или появятся в ближайшем будущем:
- запросы контейнера (container queries);
- запросы стиля (style queries);
- селектор
:has()
; - микросинтаксис
nth-of
; text-wrap: balance
;initial-letter
;- динамические единицы измерения области просмотра (viewport);
- цветовые пространства с широкой гаммой;
color-mix()
;- вложенность селекторов (nesting);
- каскадные слои (cascade layers);
- стили с ограниченной областью видимости (scoped styles);
- тригонометрические функции;
- индивидуальные свойства трансформации;
popover
;- позиционирование якоря (anchor positioning);
selectmenu
;- дискретные свойства переходов;
- анимации, управляемые прокруткой (scroll-driven animations);
- переходы отображения (view transitions).
Отзывчивость
Начнем с новых возможностей адаптивного дизайна. Эти возможности позволяют разрабатывать логические интерфейсы, владеющие информацией о собственных стилях, а также интерфейсы, использующие возможности системы для обеспечения большей "нативности" и позво ляющие пользователю стать частью процесса настройки дизайна.
Запросы контейнера
Запросы контейнера недавно стали стабильными во всех современных браузерах. Они позволяют запрашивать размеры и стили родительского элемента для определения стилей его дочерних элементов. Медиа-запросы (media queries) позволяют получать информацию только об области просмотра, т.е. они могут работать только на макроуровне макета (layout) страницы. С другой стороны, запросы контейнера являются более точным инструментом, поддерживающим любое количество макетов или макетов внутри других макетов (вложенных макетов).
В следующем примере список элементов Primary
и боковая панель Favorites
являются контейнерами. Колонка со временем получения электронного письма в этих компонентах отображается и скрывается в зависимости от н аличия свободного пространства. Это одни и те же компоненты, отображаемые в разных представлениях.
Стили этих компонентов являются динамическими благодаря запросам контейнера. При изменении размеров или макета страницы компоненты реагируют на изменение доступного им пространства. Боковая панель становится верхней с большей шириной, макеты обоих компонентов становятся идентичными. При недостатке свободного пространства они оба отображаются в сжатом виде.
Подробнее о запросах контейнера и разработке логических компонентов можно почитать в этой статье.
Запросы стиля
Спецификация запросов контейнера также позволяет запрашивать значения стилей родительского элемента. В настоящее время данная возможность частично реализована в Chrome 111, где для применения стилей контейнера можно использовать переменные CSS.
В следующем примере используются характеристики погоды, хранящиеся в значениях переменных, такие как дождь, солнечно и облачно, для стилизации фона карточки и иконки индикатора.
@container style(--sunny: true) {
.weather-card {
background: linear-gradient(-30deg, yellow, orange);
}
.weather-card:after {
content: url(<data-uri-for-demo-brevity>);
background: gold;
}
}
Это только начало для запросов стилей. В будущем у нас появятся логические запросы (boolean queries) для определения наличия значения переменной и уменьшения повторяемости кода. В настоящее время также обсуждаются запросы диапазона (range queries) для применения стилей на основе диапазона значений.
Подробнее о запросах стилей можно почитать в этой статье.
:has()
Селектор :has() является, пожалуй, самой мощной новой возможностью CSS, поддерживаемой всеми современными браузерами. Он позволяет применять стили на основе наличия в родительском элементе определенных дочерних элементов или определенного состояния дочерних элементов. Это означает, что теперь в нашем распоряжении имеется родительский селектор (parent selector).
В примере запросов контейнера :has()
используется для того, чтобы сделать компоненты еще боле е динамичными. Например, фон элемента списка с дочерним элементом, имеющим класс star
, становится серым, а фон элемента с выбранным чекбоксом - синим.
Следует отметить, что :has()
не ограничен выбором родительского элемента. Он также позволяет выбрать любого потомка родительского элемента. Например, заголовок элемента списка с дочерним элементов, имеющим класс star
, становится жирным. Это реализовано с помощью .item:has(.star) .title
. :has()
предоставляет доступ к родительским элементам, дочерним элементам и даже к соседним элементам (сиблингам), что делает этот интерфейс очень гибким. Новые примеры его использования появляются каждый день.
Во избежание проблем с производительностью рендеринга в больших деревьях DOM рекомендуется максимально ограничивать область видимости
:has()
. Например, поиск совпадений с помощью:has()
применительно к корневому элементу (root) будет медленнее, чем применительно к панели навигации или карточки элемента.
Подробнее о селекторе :has()
можно почитать в этой статье.
nth-of
Продвинутый синтаксис nth-child
позволяет использовать ключевое слово of
для ограничения существующего микросинтаксиса An + B
определенным набором элементов.
При использовании обычного nth-child
, например, :nth-child(2)
на классе special
, браузер выберет элемент с классом special
и также второго потомка. :nth-child(2 of .special)
сначала отфильтрует все элементы с классом special
, затем возьмет второй элемент из этого списка.
text-wrap: balance
Начиная с Chrome 114, вы можете использовать сбалансированный перенос текста для заголовков с помощью свойства text-wrap
со значением balance
.
Для балансировки текста браузер выполняет эффективный бинарный поиск наименьшей ширины, которая не вызывает переноса строки, останавливаясь на одном пикселе CSS (не экранном пикселе). Для дальнейшей оптимизации бинарного поиска браузер начинает с 80% средней ширины строки.
Несмотря на то, что это отличное прогрессивное улучшение, которое можно попробовать уже сегодня, следует отметить, что данный интерфейс работает только до 4 строк текста, поэтому он отлично подходит для заголовков и подзаголовков, но не подходит для более длинного контента.
Подробнее о балансировке текста можно почитать в этой статье.
initial-letter
Поддержка - 84.99% (без префикса - 64.67%)
Другим приятным улучшением веб-типографии является initial-letter
.
initial-letter
используется на псевдоэлементе :first-letter
для определения размера первой буквы на основе того, сколько строк она занимает, т.е. для определения блочного смещения буквы или "раковины" (sink), в которой она располагается.
Подробнее о initial-letter
можно почитать в этой статье.