Новое в Chrome 126

Адриана Хара

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

Я Адриана Хара. Давайте углубимся и посмотрим, что нового для разработчиков в Chrome 126.

Переходы между представлениями документов для навигации по одному и тому же источнику

API View Transitions дает вам возможность создавать плавные визуальные переходы между различными представлениями, и теперь он доступен по умолчанию для навигации одного и того же источника. Ранее он был доступен только для архитектур одностраничных приложений.

Чтобы реализовать переход между представлениями документов, обе стороны должны дать свое согласие. Для этого используйте правило view-transition и установите для дескриптора навигации значение auto.

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

@view-transition {
  navigation: auto;
}

Подробности см. в разделе Плавные переходы с помощью View Transition API. Примеры можно найти и далее.

CloseWatcher API снова включен

Для элементов <dialog> и popover="" API CloseWatcher упрощает обработку запросов на закрытие, таких как клавиша ESC на настольных платформах или жест назад на Android.

Эта функция изначально была включена в Chrome 120 , но была отключена из-за неожиданного взаимодействия с элементом диалога. Он был повторно включен в Chrome 126 после улучшений, направленных на минимизацию предыдущих проблем.

Чтобы узнать, как использовать CloseWatcher, посетите его демо-версию .

Расширение Trigger-Rumble API Gamepad API

Возможность триггерного грохота теперь является частью Gamepad API . Это расширяет возможности игр в Интернете для совместимых контроллеров.

trigger-rumble расширяет GamepadHapticActuator , который представляет собой интерфейс, представляющий оборудование в контроллере, предназначенное для обеспечения тактильной обратной связи пользователю (если доступно). trigger-rumble позволяет веб-приложениям, использующим API геймпада, также вибрировать триггеры этих геймпадов.

С помощью следующего кода вы можете проверить, поддерживается ли эта функциональность в браузере и как ее вызвать — каламбур — trigger-rumble

// This assumes a `Gamepad` as the value of the `gamepad` variable.
const triggerRumble = (gamepad, delay = 0, duration = 100, weak = 1.0, strong = 1.0) => {
  if (!('vibrationActuator' in gamepad)) {
    return;
  }
  // Feature detection.
  if (!('effects' in gamepad.vibrationActuator) || !gamepad.vibrationActuator.effects.includes('trigger-rumble')) {
    return;
  }
  gamepad.vibrationActuator.playEffect('trigger-rumble', {
    // Duration in ms.
    duration: duration,
    // The left trigger (between 0 and 1).
    leftTrigger: leftTrigger,
    // The right trigger (between 0 and 1).
    rightTrigger: rightTrigger,
  });
};

Дополнительную информацию о том, как максимально эффективно использовать API геймпада, см . в разделе «Играйте в динозавровую игру Chrome с помощью геймпада».

И более!

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

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

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

Здесь рассматриваются лишь некоторые ключевые моменты. Перейдите по следующим ссылкам, чтобы узнать о дополнительных изменениях в Chrome 126.

Подписаться

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

Привет, Адриана Хара, как только выйдет Chrome 127, я буду здесь, чтобы рассказать вам, что нового в Chrome!