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 Ursprungsfenster, das mit window.open() geöffnet wurde, 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.

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

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“.

  • Neben den Links zu fehlgeschlagenen Anfragen enthält die Console jetzt auch Links zu genau der Zeile, die auf ein nicht geladenes Stylesheet verweist.

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 für 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 viele weitere.

  • 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 Exit-Animationen ausschließlich in CSS hinzugefügt werden.
  • Die Fetch API kann jetzt mit Bring Your Own Buffer Reader verwendet werden. Dadurch werden der Aufwand für die Speicherbereinigung und das Kopieren reduziert und die Reaktionsfähigkeit für Nutzer verbessert.

Weitere Informationen

Hier werden nur einige wichtige Highlights behandelt. 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.