Nowości w Chrome 126

Oto, co musisz wiedzieć na ten temat:

Nazywam się Adriana Jara. Przyjrzyjmy się nowościom dla deweloperów w Chrome 126.

Przejścia widoku między dokumentami w przypadku nawigowania w tej samej domenie

Interfejs View Transitions API umożliwia tworzenie płynnych wizualnych przejść między różnymi widokami. Teraz jest on domyślnie dostępny w przypadku nawigacji w tej samej witrynie. Wcześniej była ona dostępna tylko dla architektur aplikacji jednostronicowych.

Aby można było wdrożyć przejście między widokami danych, obie strony muszą wyrazić na to zgodę. W tym celu użyj reguły przejścia między widokami i ustaw deskryptor nawigacji na tryb automatyczny.

Przejścia widoku między dokumentami korzystają z tych samych elementów składowych i zasad co przejścia między widokami tego samego dokumentu.

@view-transition {
  navigation: auto;
}

Więcej informacji znajdziesz w artykule Płynne przenoszenie danych w interfejsie View Transition API (tylko przykłady).

Ponownie włączono interfejs CloseWatcher API

W przypadku elementów <dialog> i popover="" interfejs CloseWatcher API ułatwia obsługę żądań zamknięcia, np. klawisza ESC na komputerze lub gestu cofania na Androidzie.

Ta funkcja była pierwotnie dostępna w Chrome 120, ale została wyłączona z powodu nieoczekiwanej interakcji z elementem okna. Po wprowadzeniu ulepszeń w Chrome 126 zostało ono ponownie włączone, aby zminimalizować poprzednie problemy.

Aby dowiedzieć się, jak korzystać z aplikacji CloseWatcher, obejrzyj jej prezentację.

Rozszerzenie interfejsu API dla Gamepada

Funkcja dzwonienia za pomocą aktywatora jest teraz częścią interfejsu Gamepad API. Zwiększa wygodę grania w internecie na zgodnych kontrolerach.

trigger-rumble jest rozwinięciem GamepadHapticActuator, czyli interfejsu reprezentującego sprzęt w kontrolerze, który ma zapewniać użytkownikowi wrażenia haptyczne (jeśli są dostępne). trigger-rumble zezwala aplikacjom internetowym, które korzystają z interfejsu Gamepad API, również na wibrowanie wyzwalaczy tych padów.

Za pomocą tego kodu możesz sprawdzić, czy przeglądarka obsługuje tę funkcję, i dowiedzieć się, jak ją aktywować (są zamierzone – 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,
  });
};

Więcej informacji o tym, jak w pełni wykorzystać możliwości interfejsu API Gamepad, znajdziesz w artykule Gra z dinozaurem w Chrome przy użyciu gamepada.

I inne funkcje

Oczywiście, jest ich jeszcze więcej.

Przeczytaj pełne informacje o wersji.

Więcej informacji

Ta analiza obejmuje tylko niektóre najważniejsze kwestie. Kliknij poniższe linki, aby dowiedzieć się więcej o zmianach w Chrome 126.

Subskrybuj

Aby być na bieżąco, zasubskrybuj kanał Chrome Developers w YouTube. Będziesz otrzymywać e-maile z powiadomieniami o każdym nowym filmie.

Cześć Adriana Jara, a gdy tylko pojawi się Chrome 127, będę informować Cię o nowościach w Chrome.