Neu in Chrome 126

Dazu sollten Sie Folgendes wissen:

Ich bin Adriana Jara. Sehen wir uns an, was es in Chrome 126 für Entwickler Neues gibt.

Ansichtsübergänge zwischen Dokumenten für Navigationen mit demselben Ursprung

Mit der View Transitions API können Sie nahtlose visuelle Übergänge zwischen verschiedenen Ansichten erstellen. Sie ist jetzt standardmäßig für Navigationen innerhalb desselben Ursprungs verfügbar. Bisher war sie nur für Single-Page-Application-Architekturen verfügbar.

Damit ein Dokumentenübergang implementiert werden kann, müssen beide Enden die Funktion aktivieren. Verwenden Sie dazu die At-Rule „view-transition“ und legen Sie den Navigationsbeschreiber auf „auto“ fest.

Für Ansichtsübergänge zwischen Dokumenten werden dieselben Bausteine und Prinzipien verwendet wie für Ansichtsübergänge innerhalb eines Dokuments.

@view-transition {
  navigation: auto;
}

Weitere Informationen und Beispiele finden Sie unter Nahtlose Übergänge mit der View Transition API.

CloseWatcher API wieder aktiviert

Bei <dialog>- und popover=""-Elementen erleichtert die CloseWatcher API die Verarbeitung von Schließanfragen, z. B. über die ESC-Taste auf Computern oder die Zurück-Geste auf Android-Geräten.

Diese Funktion wurde ursprünglich in Chrome 120 eingeführt, aber aufgrund einer unerwarteten Interaktion mit dem Dialogfeldelement deaktiviert. Sie wurde in Chrome 126 wieder aktiviert, nachdem Verbesserungen vorgenommen wurden, um die vorherigen Probleme zu minimieren.

Weitere Informationen zur Verwendung von CloseWatcher finden Sie in der Demo.

Gamepad API-Trigger-Rumble-Erweiterung

Die Trigger-Vibrationsfunktion ist jetzt Teil der Gamepad API. Sie verbessert das Gaming-Erlebnis im Web für kompatible Controller.

trigger-rumble erweitert die GamepadHapticActuator, eine Schnittstelle, die Hardware im Controller darstellt und dem Nutzer (falls verfügbar) haptisches Feedback gibt. trigger-rumble ermöglicht es Webanwendungen, die die Gamepad API verwenden, auch die Trigger dieser Gamepad-Geräte zum Vibrieren zu bringen.

Mit dem folgenden Code können Sie prüfen, ob die Funktion im Browser unterstützt wird und wie sie ausgelöst wird.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,
  });
};

Weitere Informationen zur optimalen Nutzung der Gamepad API finden Sie unter Chrome-Dino-Spiel mit einem Gamepad spielen.

…und vieles mehr

Natürlich gibt es noch viel mehr.

Vollständige Versionshinweise lesen

Weitere Informationen

Dies sind nur einige wichtige Highlights. Unter den folgenden Links finden Sie weitere Änderungen in Chrome 126.

Abonnieren

Wenn Sie auf dem Laufenden bleiben möchten, abonnieren Sie den YouTube-Kanal von Chrome Developers. Sie erhalten dann eine E-Mail-Benachrichtigung, sobald wir ein neues Video veröffentlichen.

Ich bin Adriana Jara und sobald Chrome 127 veröffentlicht wird, erzähle ich Ihnen hier, was es Neues in Chrome gibt.