Neu in Chrome 116

Adriana Jara

Dazu sollten Sie Folgendes wissen:

Mein Name ist Adriana Jara. Jetzt sehen wir uns an, was es für Entwickler Neues bei Chrome 116 gibt.

Document-Picture-in-Picture-API.

Die Document Picture-in-Picture API ermöglicht es, ein Always-On-Fenster zu öffnen, das mit beliebigem HTML-Inhalt ausgefüllt werden kann.

Ein Bild-im-Bild-Fenster, in dem ein Sintel-Trailervideo abgespielt wird.
Ein Bild-im-Bild-Fenster, das mit der Document Picture-im-Picture API (Demo) erstellt wurde.

Das Bild-im-Bild-Fenster in der Dokument-Bild-in-Bild-API ähnelt einem leeren Fenster mit demselben Ursprungsort, das mit window.open() geöffnet wird. Es gibt jedoch einige Unterschiede:

  • Das Bild-im-Bild-Fenster schwebt über anderen Fenstern.
  • Das Bild-im-Bild-Fenster überdauert nie das öffnende Fenster.
  • Im Bild-im-Bild-Fenster ist keine Navigation möglich.
  • Die Bild-im-Bild-Fensterposition kann nicht von der Website festgelegt werden.

Mit dem folgenden HTML-Code werden ein benutzerdefinierter Videoplayer und ein Schaltflächenelement zum Öffnen des Videoplayers in einem Bild-im-Bild-Fenster eingerichtet.

<div id="playerContainer">
  <div id="player">
    <video id="video"></video>
  </div>
</div>
<button id="pipButton">Open Picture-in-Picture window</button>

Mit dem folgenden JavaScript wird documentPictureInPicture.requestWindow() aufgerufen, wenn der Nutzer auf die Schaltfläche klickt, um ein leeres Bild-im-Bild-Fenster zu öffnen. Das zurückgegebene Promise wird mit einem JavaScript-Objekt für das Bild-im-Bild-Fenster aufgelöst. Der Videoplayer wird mithilfe von append() zu diesem Fenster verschoben.

pipButton.addEventListener('click', async () => {
  const player = document.querySelector("#player");

  // Open a Picture-in-Picture window.
  const pipWindow = await documentPictureInPicture.requestWindow();

  // Move the player to the Picture-in-Picture window.
  pipWindow.document.body.append(player);
});

Weitere Details und Beispiele finden Sie unter Bild im Bild für jedes Element.

In den Entwicklertools fehlen Verbesserungen bei der Fehlerbehebung für Stylesheets.

Für die Entwicklertools wurden eine Reihe von Verbesserungen vorgenommen, um Probleme mit fehlenden Stylesheets zu erkennen und zu beheben.

Erstens: In der Baumstruktur Quellen > Seite werden jetzt nur die erfolgreich bereitgestellten und geladenen Stylesheets angezeigt, um Verwirrung zu vermeiden.

Außerdem werden unter Quellen > Editor jetzt Inline-Kurzinfos zu Fehlern neben den fehlgeschlagenen Anweisungen, @import, url() und href unterstrichen und angezeigt.

Unterstrichene Anweisungen mit Kurzinfos im Bereich „Quellen“.

  • In der Console finden Sie neben den Links zu fehlgeschlagenen Anfragen jetzt auch Links zur genauen Zeile, die auf ein nicht geladenes Stylesheet verweist.

Die Konsole enthält Links zu den genauen Zeilen mit problematischen Anweisungen.

Im Bereich Network (Netzwerk) werden in die Spalte Initiator (Initiator) immer Links zu genau der Zeile eingefügt, die auf ein Stylesheet verweist, das nicht geladen werden konnte.

Im Bereich Probleme werden alle Probleme beim Laden von Stylesheets aufgeführt, einschließlich fehlerhafter URLs, fehlgeschlagener Anfragen und falscher @import-Anweisungen.

Der Bereich „Probleme“ mit Links zu Quellen und Anfragen.

Unter Neue Funktionen in den Entwicklertools finden Sie alle Details und weitere Informationen zu den Entwicklertools in Chrome 116.

…und vieles mehr

Natürlich gibt es noch viel mehr.

  • Bewegungspfad ermöglicht es Autoren, jedes grafische Objekt zu positionieren und es entlang eines vom Entwickler angegebenen Pfades zu animieren.
  • Die Eigenschaften display und content-visibility werden jetzt in Keyframe-Animationen unterstützt, sodass Exit-Animationen nur in CSS hinzugefügt werden können.
  • Die Fetch API kann jetzt mit Bring Your Own Buffer-Readern verwendet werden. Dadurch wird der Aufwand für die automatische Speicherbereinigung reduziert und die Reaktionszeit für Nutzer verbessert.

Weitere Informationen

Dies sind nur einige der wichtigsten Punkte. Unter den folgenden Links finden Sie weitere Änderungen in Chrome 116.

Abo

Wenn Sie auf dem Laufenden bleiben möchten, abonnieren Sie den YouTube-Kanal für Chrome-Entwickler. Wir benachrichtigen Sie per E-Mail, wenn wir ein neues Video veröffentlichen.

Hallo Adriana Jara, und sobald Chrome 117 veröffentlicht wird, informiere ich Sie über die Neuheiten in Chrome.