Опубликовано: 27 мая 2025 г.
Выходит новая версия Chrome 137, и в этом посте мы расскажем о некоторых ключевых особенностях этого релиза. Ознакомьтесь с полными примечаниями к выпуску Chrome 137 .
Основные моменты этого релиза:
Используйте reading-flow и reading-order для обеспечения логичного порядка перехода по вкладкам в сложных макетах. Функция CSS if() предоставляет лаконичный способ выражения условных значений. Интеграция с промисами JavaScript (JSPI) позволяет приложениям WebAssembly интегрироваться с промисами JavaScript.
CSS reading-flow и reading-order
Свойство CSS reading-flow управляет порядком отображения элементов в макетах flex, grid или block для средств обеспечения доступности, а также тем, как они получают фокус при использовании методов линейной последовательной навигации. Это решает давнюю проблему с макетами grid и flex, где порядок перехода по вкладкам может не совпадать с порядком расположения элементов.
Он принимает одно ключевое значение, по умолчанию равное normal , которое сохраняет поведение упорядочивания элементов в порядке DOM. Чтобы использовать его внутри flex-контейнера, установите его значение либо на flex-visual , либо на flex-flow . Чтобы использовать его внутри grid-контейнера, установите его значение либо на grid-rows , grid-columns , либо grid-order .
Свойство CSS ` reading-order позволяет вручную переопределять порядок элементов внутри контейнера, определяющего порядок чтения. Чтобы использовать это свойство внутри контейнера типа `grid`, `flex` или `block`, установите значение reading-flow для контейнера равным source-order , а для каждого отдельного элемента задайте ` reading-order в виде целочисленного значения.
Чтобы узнать больше, прочтите статью «Используйте CSS reading-flow для логической последовательной навигации по фокусу» .
Функция CSS if()
Функция CSS if() предоставляет лаконичный способ выражения условных значений. Она принимает ряд пар «условие-значение», разделённых точками с запятой. Функция последовательно оценивает каждое условие и возвращает значение, соответствующее первому истинному условию. Если ни одно из условий не является истинным, функция возвращает пустой поток токенов.
div {
color: var(--color);
background-color: if(style(--color: white): black; else: white);
}
.dark {
--color: black;
}
.light {
--color: white;
}
<div class="dark">dark</div>
<div class="light">light</div>
Интеграция JavaScript-промисов WebAssembly (JSPI)
Интеграция с промисами JavaScript (JSPI) — это API, позволяющий приложениям WebAssembly интегрироваться с промисами JavaScript.
Это позволяет программе WebAssembly выступать в качестве генератора промисов и взаимодействовать с API, содержащими промисы.
В частности, когда приложение использует JSPI для вызова API, содержащего промисы (JavaScript), выполнение кода WebAssembly приостанавливается; и вызывающей стороне программы WebAssembly передается промис, который будет выполнен после завершения работы программы WebAssembly.
И многое другое!
Конечно, есть еще много чего интересного:
- В продолжение концепции разделения хранилища, Chrome реализовал разделение доступа к URL-адресам больших двоичных объектов по ключу хранилища.
- Теперь реализованы форматы пикселей с плавающей запятой для холста.
- Поддерживается
offset-path: shape(), поэтому вы можете использовать адаптивные фигуры для задания пути анимации.
Дополнительная информация
Здесь описаны лишь некоторые ключевые моменты. Дополнительные изменения в Chrome 137 можно найти по следующим ссылкам.
- Примечания к выпуску Chrome 137 .
- Что нового в инструментах разработчика Chrome (137) .
- ChromeStatus.com обновляет Chrome до версии 137 .
- Календарь релизов Chrome .
Подписаться
Чтобы быть в курсе всех новостей, подпишитесь на YouTube-канал Chrome Developers , и вы будете получать уведомления по электронной почте каждый раз, когда мы выпускаем новое видео. Или подпишитесь на нас в X или LinkedIn, чтобы получать новые статьи и записи в блоге.
Как только выйдет Chrome 138, мы сразу же расскажем вам о новинках в Chrome!