Новое в Chrome 129

Pete LePage

Вот что вам нужно знать:

• Вы можете отказаться от длительных задач, чтобы повысить производительность.
• Анимируйте элементы с собственными размерами .
• В синтаксис позиционирования якорей внесены некоторые изменения.
• И это еще не все.

Меня зовут Пит ЛеПейдж. Давайте углубимся и посмотрим, что нового для разработчиков в Chrome 129.

Разбивайте длительные задачи с помощью scheduler.yield()

Длительные задачи задерживают способность браузера реагировать на пользовательский ввод, создавая впечатление, что сайт работает медленно, и влияя на критические показатели производительности, такие как INP. С помощью scheduler.yield() вы можете разбить длительные задачи на более мелкие части, улучшая отзывчивость, явно возвращаясь к основному потоку.

Он позволяет вам сообщить браузеру:

«ЭЙ! Работа, которую я собираюсь сделать, может занять некоторое время. Если вам нужно покрасить рамку, отреагировать на действия пользователя или выполнить другие важные задачи, ничего страшного, я могу подождать».

Регулярно добавляйте следующую строку в свой код JavaScript, чтобы дать браузеру передышку и избежать проблем с INP .

await scheduler.yield();

Важно, что это позволяет приоритизировать продолжение вашего кода, чтобы вы не теряли из-за yielding. Мы рекомендуем свободное использование scheduler.yield() в функциях между любыми большими фрагментами работы.

Более подробную информацию см. в разделе Оптимизация длительных задач .

Анимации с собственными размерами

CSS-анимации довольно удобны, но для них обычно требуются явные размеры, вы не сможете использовать встроенные ключевые слова для задания размеров, такие как auto , min-content или fit-content .

Свойство CSS interpolate-size открывает новый набор анимаций, которые были невозможны при использовании внутренних ключевых слов для определения размера.

Без interpolate-size кнопки в следующем видео не будут иметь перехода.

После добавления interpolate-size: allow-keywords кнопки в видео приобретают красивый эффект анимации перехода.

Указание interpolate-size: allow-keywords в root элементе задает новое поведение для всей страницы. Мы рекомендуем делать это, когда совместимость не является проблемой.

:root {
  interpolate-size: allow-keywords;
}

.item {
  height: auto;

  @starting-style {
    height: 0;
  }
}

Для более точного управления функция CSS calc-size() , похожая на calc() , также поддерживает операции только с одним из поддерживаемых внутренних ключевых слов размера. При выполнении расчетов макета ключевое слово size оценивается как исходный размер calc-size-basis .

nav a {
  width: 80px;
  overflow-x: clip;
  transition: width 0.35s ease;

  &:hover {
    width: calc-size(auto, size);
  }
}

Подробную информацию см. в разделе Анимация по высоте: auto; (и другие внутренние ключевые слова для задания размеров) в CSS .

Изменения в позиционировании якорей CSS

Позиционирование якоря CSS появилось в Chrome 125, но после дополнительного обсуждения в рабочей группе CSS в спецификацию и реализацию было внесено несколько изменений. Если вы уже используете позиционирование якоря CSS, вам нужно будет обновить свой код как можно скорее.

Во-первых, inset-area переименован в position-area . Это было предпочтительнее, поскольку фраза position- помогает вам запомнить, что это свойство применяется к позиционируемому элементу, а не к якорному элементу.

Во-вторых, position-try-options переименован в position-try-fallbacks . Это поможет вам запомнить, что это всего лишь откаты к основной позиции, которая определяется базовыми стилями.

Наконец, функциональный синтаксис inset-area() удаляется из position-try . Поэтому используйте position-try-fallbacks: top вместо position-try-fallbacks: inset-area(top) .

И многое другое!

Конечно, есть еще много чего.

Появился новый метод Intl для форматирования длительностей с поддержкой нескольких локалей.

const l = "fr-FR";
const d = {hours: 1, minutes: 46, seconds: 40};
const opts = {style: "long"};
new Intl.DurationFormat(l, opts).format(d);
// "1 heure, 46 minutes et 40 secondes"

Web GPU Canvas теперь может использовать весь диапазон дисплея для HDR-изображений.

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

Прочитайте полные примечания к выпуску .

Дальнейшее чтение

Это охватывает только некоторые ключевые моменты. Проверьте следующие ссылки для дополнительных изменений в Chrome 129.

• Что нового в Chrome DevTools (129)
• Обновления ChromeStatus.com для Chrome 129
• Список изменений в исходном репозитории Chromium
• Календарь релизов Chrome

Подписаться

Чтобы оставаться в курсе событий, подпишитесь на канал Chrome Developers на YouTube , и вы будете получать уведомления по электронной почте каждый раз, когда мы выпускаем новое видео.

Меня зовут Пит ЛеПейдж, я заменяю Адриану. Как только выйдет Chrome 130, мы сразу же расскажем вам, что нового в Chrome!