Nowości w Chrome 126

Adriana Jara

Oto, co musisz wiedzieć na ten temat:

Nazywam się Adriana Jara. Zobacz, co nowego w Chrome 126 dla deweloperów.

Przejścia między widokami dokumentów w przypadku nawigacji w tym samym źródle

Interfejs View Migrates API umożliwia tworzenie płynnych wizualnych przejść między różnymi widokami. Teraz jest on domyślnie dostępny w przypadku nawigacji z tego samego źródła. Wcześniej była ona dostępna tylko w przypadku architektury aplikacji jednostronicowej.

Aby wdrożyć przejście między widokami dokumentów, obie strony muszą wyrazić na to zgodę. Aby to zrobić, użyj reguły at-rule view-transition i ustaw opis nawigacji na auto.

Przejścia między widokami w różnych dokumentach korzystają z tych samych elementów i zasad co przejścia w tym samym dokumencie.

@view-transition {
  navigation: auto;
}

Więcej informacji znajdziesz w artykule Płynne przejścia dzięki interfejsowi View Migrate API. Więcej przykładów znajdziesz w przykładach.

Ponownie włączono interfejs CloseWatcher API

W przypadku elementów <dialog> i popover="" interfejs CloseWatcher API ułatwia obsługę żądań zamknięcia, takich jak klawisz ESC na platformach stacjonarnych czy gest cofania na Androidzie.

Ta funkcja została pierwotnie udostępniona w wersji Chrome 120, ale została wyłączona z powodu nieoczekiwanego zachowania elementu okna dialogowego. Po wprowadzeniu ulepszeń, które minimalizują poprzednie problemy, funkcja została ponownie włączona w Chrome 126.

Aby dowiedzieć się, jak korzystać z CloseWatcher, obejrzyj wersję demonstracyjną.

Rozszerzenie interfejsu Gamepad API dotyczące wibracji po naciśnięciu przycisku

Funkcja wibracji po naciśnięciu przycisku jest teraz częścią interfejsu Gamepad API. Usprawnia rozgrywkę w internecie na zgodnych kontrolerach.

trigger-rumble – rozszerzenie GamepadHapticActuator, czyli interfejsu reprezentującego sprzęt w kontrolerze, zaprojektowany w taki sposób, by reagować haptycznie użytkownika (jeśli jest dostępny). trigger-rumble zezwala aplikacjom internetowym, które używają interfejsu Gamepad API, na wibracje uruchamiające te urządzenia.

Za pomocą tego kodu możesz sprawdzić, czy funkcja jest obsługiwana w przeglądarce, i jak ją wywołać.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,
  });
};

Aby dowiedzieć się więcej o tym, jak w pełni wykorzystać interfejs Gamepad API, przeczytaj artykuł Graj w grę Dino w Chrome za pomocą kontrolera.

I inne funkcje

Oczywiście jest ich znacznie więcej.

Przeczytaj pełne informacje o wersji

Więcej informacji

Obejmuje to tylko niektóre najważniejsze informacje. Aby dowiedzieć się więcej o dodatkowych zmianach w Chrome 126, kliknij te linki.

Subskrybuj

Aby być na bieżąco, zasubskrybuj kanał w YouTube dla programistów Chrome. Otrzymasz wtedy e-maila z powiadomieniem, gdy tylko opublikujemy nowy film.

Cześć, tu Adriana Jara. Gdy tylko pojawi się nowa wersja Chrome 127, opowiem Ci, co nowego w Chrome.