Вот что вам нужно знать:
- Расширенная функция CSS
attr()
позволяет использовать типы, кроме<string>
, во всех свойствах CSS. - Запросы контейнеров состояния прокрутки CSS позволяют использовать запросы контейнеров для стилизации потомков контейнеров на основе их состояния прокрутки.
- CSS
text-box
,text-box-trim
иtext-box-edge
позволяют более точно контролировать вертикальное выравнивание текста. - И есть еще много чего .
Расширенная функция CSS attr()
Эта функция добавляет к существующей функции attr()
функции, указанные в CSS Level 5. Это позволяет использовать типы помимо <string>
во всех свойствах CSS (в дополнение к существующей поддержке содержимого псевдоэлементов).
В следующем примере значение свойства color
для div
использует значение атрибута data-color
. Значение этого атрибута преобразуется в <color>
с помощью attr()
и type()
. Резервное значение установлено на red
.
<div data-foo="blue">test</div>
div {
color: attr(data-foo type(<color>), red);
}
Узнайте больше об обновлении CSS attr()
.
Запросы контейнера состояния прокрутки CSS
Используйте контейнерные запросы для стилизации потомков контейнеров на основе их состояния прокрутки.
Контейнер запроса — это либо контейнер прокрутки, либо элемент, на который влияет положение прокрутки контейнера прокрутки. Могут быть запрошены следующие состояния:
-
stuck
: липкий контейнер приклеен к одному из краев ползунка прокрутки. -
snapped
: контейнер, выровненный по привязке к прокрутке, в настоящее время привязан горизонтально или вертикально. -
scrollable
: можно ли прокручивать контейнер прокрутки в запрошенном направлении.
Новый тип контейнера: scroll-state
позволяет запрашивать контейнеры. Например:
.stuck-top {
container-type: scroll-state;
position: sticky;
top: 0px;
> nav {
@container scroll-state(stuck: top) {
background: Highlight;
color: HighlightText;
}
}
}
Узнайте больше и посмотрите несколько демонстраций запросов состояния прокрутки CSS .
CSS text-box
, text-box-trim
и text-box-edge
Свойство text-box-trim
определяет стороны, которые необходимо обрезать (сверху или снизу), а свойство text-box-edge
указывает, как следует обрезать край.
Эти свойства позволяют точно контролировать вертикальный интервал с помощью показателей шрифта.
h1 {
/* trim both sides to the capital letters */
text-box: trim-both cap alphabetic;
/* trim both sides to the lowercase letter x */
text-box: trim-both ex alphabetic;
}
Узнайте, как использовать эти новые свойства в CSS text-box-trim
.
И многое другое!
Конечно, есть еще много чего.
-
Animation.overallProgress
дает вам удобное и последовательное представление о том, как далеко продвинулась анимация на протяжении ее итераций, независимо от характера ее временной шкалы. -
Node.prototype.moveBefore
позволяет перемещать элементы по дереву DOM без сброса состояния элемента. - Интерфейс
FileSystemObserver
уведомляет веб-сайты об изменениях в файловой системе. - Метод
PublicKeyCredential
getClientCapabilities()
позволяет определить, какие функции WebAuthn поддерживаются клиентом пользователя.
Подробную информацию об этих и многих других функциях Chrome см. в полных примечаниях к выпуску Chrome 133 !
Дальнейшее чтение
Здесь рассматриваются лишь некоторые ключевые моменты. Перейдите по следующим ссылкам, чтобы узнать о дополнительных изменениях в Chrome 133.
- Примечания к выпуску Chrome 133 .
- Что нового в Chrome DevTools (133) .
- Обновления ChromeStatus.com для Chrome 133 .
- Календарь выпусков Chrome .
Подписаться
Чтобы быть в курсе новостей, подпишитесь на канал YouTube для разработчиков Chrome , и вы будете получать уведомления по электронной почте каждый раз, когда мы запускаем новое видео.
Как только выйдет Chrome 133, мы будем здесь, чтобы рассказать вам, что нового в Chrome!