Последние несколько месяцев открыли золотую эру веб-интерфейса. Новые возможности платформы появились благодаря тесному кросс-браузерному внедрению, которое поддерживает больше веб-возможностей и функций настройки, чем когда-либо.
Вот 20 самых интересных и впечатляющих функций, которые появились недавно или появятся в ближайшее время:
- Контейнерные запросы
- Запросы стиля
-
:has()селектор - n-ный микросинтаксис
-
text-wrap: balance -
initial-letter - Динамические единицы просмотра
- Широкая цветовая гамма
-
color-mix() - Вложение
- Каскадные слои
- Стили с ограниченной областью действия
- Тригонометрические функции
- Отдельные свойства преобразования
- трещать
- позиционирование якоря
- выбрать меню
- Дискретные переходы свойств
- Анимация, управляемая прокруткой
- Просмотр переходов
Новый Адаптивный
Давайте начнем с некоторых новых возможностей адаптивного дизайна. Новые функции платформы позволяют создавать логические интерфейсы с компонентами, которые владеют своей адаптивной информацией о стиле, создавать интерфейсы, которые используют возможности системы для создания более естественных пользовательских интерфейсов, а также позволяют пользователю стать частью процесса проектирования с запросами пользовательских предпочтений для полной настройки.
Контейнерные запросы
Контейнерные запросы недавно стали стабильными во всех современных браузерах. Они позволяют вам запрашивать размер и стиль родительского элемента, чтобы определить стили, которые следует применить к любому из его дочерних элементов. Медиа-запросы могут получать доступ и использовать информацию только из области просмотра, что означает, что они могут работать только с макропредставлением макета страницы. Контейнерные запросы, с другой стороны, являются более точным инструментом, который может поддерживать любое количество макетов или макетов внутри макетов.
В следующем примере папки «Входящие» основная папка «Входящие» и боковая панель «Избранное» являются контейнерами. Электронные письма внутри них настраивают свою сетку и показывают или скрывают временную метку электронного письма в зависимости от доступного места. Это один и тот же компонент на странице, просто он появляется в разных представлениях.
Поскольку у нас есть запрос к контейнеру, стили этих компонентов являются динамическими. Если вы настроите размер и макет страницы, компоненты будут реагировать на индивидуально выделенное пространство. Боковая панель становится верхней панелью с большим пространством, и мы видим, что макет больше похож на основной почтовый ящик. Когда места меньше, они оба отображаются в сжатом формате.
Узнайте больше о контейнерных запросах и построении логических компонентов в этом посте .
Запросы стиля
Спецификация запроса контейнера также позволяет запрашивать значения стиля родительского контейнера. В настоящее время это частично реализовано в 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;
}
}
Это только начало для запросов стиля. В будущем у нас появятся логические запросы, позволяющие определить, существует ли значение настраиваемого свойства, и уменьшить повторение кода, а в настоящее время обсуждаются запросы диапазона для применения стилей на основе диапазона значений. Это позволит применить показанные здесь стили, используя процентное значение вероятности дождя или облачности.
Вы можете узнать больше и увидеть больше демонстраций в нашем блоге, посвященном запросам стиля .
:has()
Говоря о мощных, динамических функциях, селектор :has() — одна из самых мощных новых возможностей CSS, появившихся в современных браузерах. С помощью :has() вы можете применять стили, проверяя, содержит ли родительский элемент наличие определенных дочерних элементов или находятся ли эти дочерние элементы в определенном состоянии. Это означает, что у нас, по сути, теперь есть родительский селектор.
Основываясь на примере запроса контейнера, вы можете использовать :has() , чтобы сделать компоненты еще более динамичными. В нем к элементу с элементом «звездочка» применяется серый фон, а к элементу с установленным флажком — синий фон.
Но этот API не ограничивается родительским выбором. Вы также можете стилизовать любые дочерние элементы внутри родительского элемента. Например, заголовок выделяется жирным шрифтом, если в элементе присутствует элемент звездочки. Это достигается с помощью .item:has(.star) .title . Использование селектора :has() дает вам доступ к родительским элементам, дочерним элементам и даже родственным элементам, что делает этот API действительно гибким, и каждый день появляются новые варианты использования.
Узнайте больше и изучите еще несколько демонстраций, ознакомьтесь с этой публикацией в блоге, посвященной :has() .
синтаксис n-го числа
Поддержка браузера
- 111
- 111
- 113
- 9
Веб-платформа теперь имеет более продвинутый выбор n-го дочернего элемента. Расширенный синтаксис nth-child предоставляет новое ключевое слово («of»), которое позволяет использовать существующий микросинтаксис An+B с более конкретным подмножеством для поиска.
Если вы используете обычный nth-child, например :nth-child(2) в специальном классе, браузер выберет элемент, к которому применен специальный класс, и который также является вторым дочерним элементом. В этом отличие от :nth-child(2 of .special) , который сначала предварительно фильтрует все элементы .special , а затем выбирает второй из этого списка.
Подробно изучите эту функцию в нашей статье о синтаксисе nth-of .
text-wrap: balance
Селекторы и запросы стилей — не единственные места, где мы можем встраивать логику в наши стили; типографика — это другое. Начиная с Chrome 114, вы можете использовать балансировку переноса текста для заголовков, используя свойство text-wrap со значением balance .
Чтобы сбалансировать текст, браузер эффективно выполняет двоичный поиск наименьшей ширины, которая не вызывает дополнительных строк, останавливаясь на одном пикселе CSS (не пикселе отображения). Чтобы еще больше минимизировать шаги бинарного поиска, браузер начинает с 80% средней ширины строки.
Узнайте больше об этом в этой статье .
initial-letter
Еще одно приятное улучшение веб-типографики — initial-letter . Это свойство CSS дает вам лучший контроль над стилем буквицы-вставки.
Вы используете initial-letter в псевдоэлементе :first-letter , чтобы указать: Размер буквы в зависимости от того, сколько строк она занимает. Смещение блока буквы, или «раковина», где будет располагаться буква.
Подробнее об использовании intial-letter можно узнать здесь .
Динамические единицы просмотра
Поддержка браузера
- 108
- 108
- 101
- 15,4
Одной из распространенных проблем, с которыми сегодня сталкиваются веб-разработчики, является точное и единообразное определение размеров всей области просмотра, особенно на мобильных устройствах. Как разработчик, вы хотите, чтобы 100vh (100% высоты области просмотра) означало «быть таким же высоким, как область просмотра», но единица vh не учитывает такие вещи, как убирание навигационных панелей на мобильных устройствах, поэтому иногда она оказывается слишком длинной и вызывает прокрутку.
Чтобы решить эту проблему, на веб-платформе теперь есть новые значения единиц измерения, в том числе: - Малая высота и ширина области просмотра (или svh и svw ), которые представляют наименьший активный размер области просмотра. - Большая высота и ширина области просмотра ( lvh и lvw ), которые представляют наибольший размер. - Динамическая высота и ширина области просмотра ( dvh и dvw ).
Единицы динамического окна просмотра изменяются в значении, когда дополнительные динамические панели инструментов браузера, такие как адрес вверху или панель вкладок внизу, видны, а когда нет.
Дополнительные сведения об этих новых единицах см. в статье Большие, малые и динамические единицы видового экрана .
Широкие цветовые пространства
Еще одним ключевым дополнением веб-платформы являются широкие цветовые пространства. До того, как на веб-платформе стала доступна широкая цветовая гамма, вы могли сделать фотографию с яркими цветами, которые можно было бы просмотреть на современных устройствах, но вы не могли получить кнопку, цвет текста или фон, соответствующие этим ярким значениям.
Попробуйте сами
Но теперь на веб-платформе появился ряд новых цветовых пространств, включая REC2020, P3, XYZ, LAB, OKLAB, LCH и OKLCH. Познакомьтесь с новыми цветовыми пространствами Интернета и многим другим в Руководстве по цвету HD .
И вы можете сразу увидеть в DevTools, как расширился цветовой диапазон: белая линия показывает, где заканчивается диапазон srgb и где начинается цветовой диапазон с более широкой гаммой.
Доступно гораздо больше инструментов для цвета! Не пропустите все замечательные улучшения градиентов. Есть даже совершенно новый инструмент, созданный Адамом Аргайлом, который поможет вам опробовать новый веб-палитру цветов и конструктор градиентов. Попробуйте его на сайтеgradient.style .
сочетание цветов()
Расширение расширенных цветовых пространств осуществляется с помощью функции color-mix() . Эта функция поддерживает смешивание двух значений цвета для создания новых значений на основе каналов смешиваемых цветов. Цветовое пространство, в котором вы смешиваете, влияет на результаты. Работа в более воспринимаемом цветовом пространстве, таком как oklch, будет использовать другой цветовой диапазон, чем в srgb.
color-mix(in srgb, blue, white);
color-mix(in srgb-linear, blue, white);
color-mix(in lch, blue, white);
color-mix(in oklch, blue, white);
color-mix(in lab, blue, white);
color-mix(in oklab, blue, white);
color-mix(in xyz, blue, white);
Функция color-mix() предоставляет давно востребованную возможность: возможность сохранять непрозрачные значения цвета, добавляя к ним некоторую прозрачность. Теперь вы можете использовать переменные цвета вашего бренда, создавая вариации этих цветов с разной непрозрачностью. Способ сделать это — смешать цвет с прозрачным. Когда вы смешиваете синий цвет вашего бренда с 10% прозрачным, вы получаете непрозрачный цвет бренда на 90%. Вы можете увидеть, как это позволяет быстро создавать цветовые системы.
Вы можете увидеть это в действии сегодня в Chrome DevTools с действительно красивым значком диаграммы Венна предварительного просмотра на панели стилей .
Дополнительные примеры и подробности см. в нашем блоге о Color-Mix или попробуйте эту игровую площадку color-mix().
Основы CSS
Создание новых возможностей, которые принесут явную пользу пользователям, — это одна часть уравнения, но многие функции, появившиеся в Chrome, предназначены для улучшения опыта разработчиков и создания более надежной и организованной архитектуры CSS. Эти функции включают в себя вложение CSS, каскадные слои, стили с ограниченной областью действия, тригонометрические функции и отдельные свойства преобразования.
Вложение
Вложенность CSS, то, что людям нравится в Sass и один из самых популярных запросов разработчиков CSS на протяжении многих лет, наконец-то появляется на веб-платформе. Вложенность позволяет разработчикам писать в более сжатом, сгруппированном формате, что снижает избыточность.
.card {}
.card:hover {}
/* can be done with nesting like */
.card {
&:hover {
}
}
Вы также можете вкладывать медиа-запросы , что также означает, что вы можете вкладывать запросы-контейнеры . В следующем примере карточка меняется с книжного макета на альбомный, если в ее контейнере достаточно ширины:
.card {
display: grid;
gap: 1rem;
@container (width >= 480px) {
display: flex;
}
}
Настройка flex макета происходит, когда в контейнере доступно более (или равное) 480px встроенного пространства. Браузер просто применит этот новый стиль отображения при выполнении условий.
Для получения дополнительной информации и примеров ознакомьтесь с нашей публикацией о вложении CSS .
Каскадные слои
Еще одна проблема разработчиков, которую мы выявили, — это обеспечение единообразия, в котором стили побеждают другие, и частью решения этой проблемы является лучший контроль над каскадом CSS.
Каскадные слои решают эту проблему, предоставляя пользователям контроль над тем, какие слои имеют более высокий приоритет, чем другие, что означает более точный контроль над применением ваших стилей.
Узнайте больше о том, как использовать каскадные слои, в этой статье .
CSS с ограниченной областью действия
Стили с областью действия CSS позволяют разработчикам указывать границы, к которым применяются определенные стили, по сути создавая собственное пространство имен в CSS. Раньше разработчики полагались на сторонние сценарии для переименования классов или специальные соглашения об именах, чтобы предотвратить конфликт стилей, но вскоре вы можете использовать @scope .
Здесь мы ограничиваем элемент .title элементом .card . Это предотвратит конфликт этого элемента заголовка с любыми другими элементами .title на странице, такими как заголовок сообщения в блоге или другой заголовок.
@scope (.card) {
.title {
font-weight: bold;
}
}
Вы можете увидеть @scope с ограничениями области действия вместе с @layer в этой живой демонстрации:
Узнайте больше о @scope в спецификации css-cascade-6 .
Тригонометрические функции
Еще одной особенностью CSS являются тригонометрические функции, добавляемые к существующим математическим функциям CSS. Эти функции теперь стабильны во всех современных браузерах и позволяют создавать более органичные макеты на веб-платформе. Отличным примером является радиальный макет меню, который теперь можно проектировать и анимировать с помощью функций sin() и cos() .
В демонстрации ниже точки вращаются вокруг центральной точки. Вместо вращения каждой точки вокруг своего центра и последующего перемещения ее наружу, каждая точка перемещается по осям X и Y. Расстояния по осям X и Y определяются с учетом cos() и, соответственно, sin() --angle .
Более подробную информацию по этой теме можно найти в нашей статье о тригонометрических функциях .
Отдельные свойства преобразования
Эргономика разработчиков продолжает улучшаться благодаря индивидуальным функциям трансформации. С тех пор, как мы в последний раз проводили ввод-вывод, отдельные преобразования работали стабильно во всех современных браузерах.
Раньше вы полагались на функцию преобразования для применения подфункций для масштабирования, поворота и перевода элемента пользовательского интерфейса. Это требовало большого количества повторений и особенно неприятно при применении нескольких преобразований в разные моменты анимации.
.target {
transform: translateX(50%) rotate(30deg) scale(1.2);
}
.target:hover {
transform: translateX(50%) rotate(30deg) scale(2); /* Only scale changed here, yet you have to repeat all other parts */
}
Теперь вы можете использовать все эти детали в своей CSS-анимации, разделив типы преобразований и применяя их индивидуально.
.target {
translate: 50% 0;
rotate: 30deg;
scale: 1.2;
}
.target:hover {
scale: 2;
}
При этом изменения в перемещении, вращении или масштабе могут происходить одновременно с разной скоростью изменений в разное время анимации.
Дополнительную информацию см. в этом посте об отдельных функциях преобразования .
Настраиваемые компоненты
Чтобы убедиться, что мы удовлетворяем некоторые ключевые потребности разработчиков через веб-платформу, мы работаем с группой сообщества OpenUI и определили три решения, с которых можно начать:
- Встроенная функциональность всплывающих окон с обработчиками событий, декларативная структура DOM и доступные значения по умолчанию.
- CSS API для привязки двух элементов друг к другу для обеспечения позиционирования привязки.
- Настраиваемый компонент раскрывающегося меню, который можно использовать, если вы хотите стилизовать содержимое внутри элемента выбора.
Трещать
API popover дает элементам некоторые встроенные возможности поддержки браузера, такие как:
- Поддержка верхнего уровня, поэтому вам не нужно управлять
z-index. Когда вы открываете всплывающее окно или диалоговое окно, вы перемещаете этот элемент на специальный слой в верхней части страницы. - Бесплатное поведение легкого отклонения в
autoвсплывающих окнах, поэтому, когда вы щелкаете за пределами элемента, всплывающее окно закрывается, удаляется из дерева доступности и фокусируется должным образом. - Доступность по умолчанию для соединительной ткани цели поповера и самого поповера.
Все это означает, что для создания всех этих функций и отслеживания всех этих состояний потребуется писать меньше JavaScript.
Структура DOM для popover является декларативной и может быть написана так же ясно, как присвоение вашему элементу popover id и атрибута popover . Затем вы синхронизируете этот идентификатор с элементом, который будет открывать всплывающее окно, например с кнопкой с атрибутом popovertarget :
<div id="event-popup" popover>
<!-- Popover content goes in here -–>
</div>
<button popovertarget="event-popup">Create New Event</button>
popover — это сокращение от popover=auto . Элемент с popover=auto принудительно закроет другие всплывающие окна при открытии, получит фокус при открытии и может закрыть его. И наоборот, элементы popover=manual не закрывают принудительно элементы других типов, не получают фокус немедленно и не закрывают свет. Они закрываются с помощью переключателя или другого закрывающего действия.
Самую актуальную документацию по поповерам в настоящее время можно найти на MDN .
Расположение якоря
Поповеры также часто используются в таких элементах, как диалоги и всплывающие подсказки, которые обычно необходимо привязать к конкретным элементам. Возьмите это событие в качестве примера. Когда вы нажимаете на событие календаря, рядом с событием, на которое вы нажали, появляется диалоговое окно. Элемент календаря — это якорь, а всплывающее окно — это диалоговое окно, в котором отображаются сведения о событии.
Вы можете создать центрированную всплывающую подсказку с помощью функции anchor() , используя ширину якоря, чтобы расположить всплывающую подсказку на 50% от позиции якоря по оси X. Затем используйте существующие значения позиционирования, чтобы применить остальные стили размещения.
Но что произойдет, если всплывающее окно не поместится в область просмотра из-за того, как вы его расположили?
Чтобы решить эту проблему, API позиционирования привязки включает резервные позиции, которые вы можете настроить. В следующем примере создается резервная позиция под названием «сверху, затем снизу». Браузер сначала попытается разместить всплывающую подсказку вверху, и если она не помещается в область просмотра, браузер затем разместит ее под привязывающим элементом внизу.
.center-tooltip {
position-fallback: --top-then-bottom;
translate: -50% 0;
}
@position-fallback --top-then-bottom {
@try {
bottom: calc(anchor(top) + 0.5rem);
left: anchor(center);
}
@try {
top: calc(anchor(bottom) + 0.5rem);
left: anchor(center);
}
}
Узнайте больше о позиционировании якоря в этом сообщении блога .
<selectmenu>
Используя как всплывающее окно, так и позиционирование привязки, вы можете создавать полностью настраиваемые меню выбора. Группа сообщества OpenUI исследовала фундаментальную структуру этих меню и искала способы настройки любого содержимого в них. Возьмите эти наглядные примеры:
Чтобы создать пример крайнего левого selectmenu с цветными точками, соответствующими цвету, который будет отображаться в событии календаря, вы можете написать его следующим образом:
<selectmenu>
<button slot="button" behavior="button">
<span>Select event type</span>
<span behavior="selected-value" slot="selected-value"></span>
<span><img src="icon.svg"/></span>
</button>
<option value="meeting">
<figure class="royalblue"></figure>
<p>Meeting</p>
</option>
<option value="break">
<figure class="gold"></figure>
<p>Lunch/Break</p>
</option>
...
</selectmenu>
Дискретные переходы свойств
Чтобы все это плавно включало и выключало всплывающие окна, в Интернете нужен какой-то способ анимации отдельных свойств. Это свойства, которые в прошлом обычно не поддавались анимации, например анимация к верхнему слою и обратно, анимация к display: none .
В рамках работы по обеспечению красивых переходов для всплывающих окон, меню выбора и даже существующих элементов, таких как диалоговые окна или пользовательские компоненты, браузеры включают новые возможности для поддержки этих анимаций.
Следующая демонстрация всплывающих окон анимирует появление и удаление всплывающих окон с помощью :popover-open для открытого состояния, @starting-style для состояния до открытия и применяет значение преобразования непосредственно к элементу для состояния после открытия-закрытия. . Чтобы все это работало с отображением, необходимо добавить свойство transition , например:
.settings-popover {
&:popover-open {
/* 0. before-change */
@starting-style {
transform: translateY(20px);
opacity: 0;
}
/* 1. open (changed) state */
transform: translateY(0);
opacity: 1;
}
/* 2. After-change state */
transform: translateY(-50px);
opacity: 0;
/* enumarate transitioning properties, including display */
transition: transform 0.5s, opacity 0.5s, display 0.5s allow-discrete;
}
Взаимодействия
Это подводит нас к взаимодействиям, последней остановке в этом туре по функциям веб-интерфейса.
Мы уже говорили об анимации дискретных свойств, но в Chrome также есть несколько действительно интересных API-интерфейсов, связанных с анимацией, управляемой прокруткой, и переходами между представлениями.
Анимация, управляемая прокруткой
Анимации, управляемые прокруткой, позволяют управлять воспроизведением анимации в зависимости от положения прокрутки контейнера прокрутки. Это означает, что при прокрутке вверх или вниз анимация перемещается вперед или назад. Кроме того, с помощью анимации, управляемой прокруткой, вы также можете управлять анимацией в зависимости от положения элемента внутри его контейнера прокрутки. Это позволяет создавать интересные эффекты, такие как фоновое изображение параллакса, индикаторы выполнения прокрутки и изображения, которые проявляются, когда появляются на экране.
Этот API поддерживает набор классов JavaScript и свойств CSS, которые позволяют легко создавать декларативную анимацию, управляемую прокруткой.
Для управления CSS-анимацией путем прокрутки используйте новые свойства scroll-timeline , view-timeline и animation-timeline . Чтобы управлять API веб-анимации JavaScript, передайте экземпляр ScrollTimeline или ViewTimeline в качестве параметра timeline в Element.animate()
Эти новые API работают в сочетании с существующими API-интерфейсами веб-анимации и CSS-анимации, а это означает, что они извлекают выгоду из преимуществ этих API. Это включает в себя возможность запускать эти анимации вне основного потока. Да, прочтите это правильно: теперь вы можете получить плавную и плавную анимацию, управляемую прокруткой, идущую за пределами основного потока, всего лишь с помощью нескольких строк дополнительного кода. Что не нравится?!
Подробное подробное руководство по созданию анимации, управляемой прокруткой, можно найти в этой статье об анимации, управляемой прокруткой .
Просмотр переходов
API View Transition позволяет легко изменить DOM за один шаг, создавая при этом анимированный переход между двумя состояниями. Это могут быть простые переходы между представлениями, но вы также можете контролировать, как должны переходить отдельные части страницы.
Переходы представлений можно использовать в качестве прогрессивного улучшения: возьмите код, который обновляет DOM любым методом, и оберните его в API перехода представлений с запасным вариантом для браузеров, которые не поддерживают эту функцию.
function spaNavigate(data) {
// Fallback for browsers that don't support this API:
if (!document.startViewTransition) {
updateTheDOMSomehow(data);
return;
}
// With a transition:
document.startViewTransition(() => updateTheDOMSomehow(data));
}
То, как должен выглядеть переход, контролируется с помощью CSS.
@keyframes slide-from-right {
from { opacity: 0; transform: translateX(75px); }
}
@keyframes slide-to-left {
to { opacity: 0; transform: translateX(-75px); }
}
::view-transition-old(root) {
animation: 350ms both slide-to-left ease;
}
::view-transition-new(root) {
animation: 350ms both slide-from-right ease;
}
Как показано в этой замечательной демонстрации Макси Феррейры , другие взаимодействия со страницами, такие как воспроизведение видео, продолжают работать, пока происходит переход просмотра.
Переходы просмотра в настоящее время работают с одностраничными приложениями (SPA) из Chrome 111. Работа над поддержкой многостраничных приложений ведется. Чтобы узнать больше, ознакомьтесь с нашим полным руководством по переходам , которое проведет вас через все это.
Заключение
Следите за всеми последними лендингами в CSS и HTML прямо здесь, на сайте Developer.chrome.com , а также смотрите видеоролики о вводе-выводе , чтобы узнать больше о веб-лендингах.