Neu in Chrome 116

Adriana Jara

Dazu sollten Sie Folgendes wissen:

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

Document Picture-in-Picture API

Mit der Picture-in-Picture API für Dokumente können Sie ein Fenster öffnen, das immer im Vordergrund angezeigt wird und mit beliebigen HTML-Inhalten gefüllt werden kann.

Ein Bild-im-Bild-Fenster, in dem der Trailer zu „Sintel“ abgespielt wird.
Ein Bild-im-Bild-Fenster, das mit der Document Picture-in-Picture API erstellt wurde (Demo).

Das Bild-im-Bild-Fenster in der Document Picture-in-Picture API ähnelt einem leeren Fenster mit demselben Ursprung, das mit window.open() geöffnet wird, mit einigen Unterschieden:

  • Das Bild-im-Bild-Fenster wird über anderen Fenstern angezeigt.
  • Das Bild-im-Bild-Fenster ist immer kleiner als das ursprüngliche Fenster.
  • Das Bild-im-Bild-Fenster kann nicht bedient werden.
  • Die Position des Bild-im-Bild-Fensters kann nicht von der Website festgelegt werden.

Im folgenden HTML-Code wird ein benutzerdefinierter Videoplayer und ein Schaltflächenelement eingerichtet, um den Videoplayer in einem Bild-im-Bild-Fenster zu öffnen.

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

Im folgenden JavaScript-Code 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 ein Bild-im-Bild-Fenster aufgelöst. Der Videoplayer wird mit append() in dieses 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 Informationen und Beispiele finden Sie unter Bild-im-Bild für beliebige Elemente.

Verbesserungen bei der Fehlerbehebung für Stylesheets in den Entwicklertools

Die Entwicklertools wurden verbessert, um Probleme mit fehlenden Stylesheets zu erkennen und zu beheben.

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

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

Unterstrichene Aussagen mit Kurzinfos im Bereich „Quellen“.

  • In der Konsole finden Sie jetzt nicht nur Links zu fehlgeschlagenen Anfragen, sondern auch zu der genauen Zeile, die auf ein Stylesheet verweist, das nicht geladen werden konnte.

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

Im Netzwerkbereich werden in der Spalte Initiator immer Links zur genauen Zeile angezeigt, die auf ein Stylesheet verweist, das nicht geladen werden konnte.

Im Steuerfeld „Probleme“ werden alle Probleme beim Laden von Stylesheets aufgeführt, einschließlich fehlerhafter URLs, fehlgeschlagener Anfragen und falsch platzierter @import-Anweisungen.

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

In diesem Artikel finden Sie alle Details und weitere Informationen zu den Entwicklertools in Chrome 116.

…und vieles mehr

Natürlich gibt es noch viel mehr.

  • Mit dem Bewegungspfad können Autoren beliebige grafische Objekte positionieren und entlang eines vom Entwickler angegebenen Pfades animieren.
  • Die Eigenschaften display und content-visibility werden jetzt in Keyframe-Animationen unterstützt. So können Ausstiegsanimationen vollständig in CSS hinzugefügt werden.
  • Die Fetch API kann jetzt mit Bring Your Own Buffer-Lesern verwendet werden. Dadurch werden der Overhead und die Anzahl der Kopien bei der Garbage Collection reduziert und die Reaktionsfähigkeit für Nutzer verbessert.

Weitere Informationen

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

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 heiße Adriana Jara und sobald Chrome 117 veröffentlicht wird, erzähle ich Ihnen hier, was es Neues in Chrome gibt.