Neu in Chrome 110

Adriana Jara

Dazu sollten Sie Folgendes wissen:

  • Mit der neuen :picture-in-picture Pseudoklasse können Sie Ihren Bild-in-Bild-Elementen einen benutzerdefinierten Stil hinzufügen.
  • Legen Sie das Startverhalten Ihrer Web-App mit launch_handler in Ihrem Manifest fest.
  • das credentialless-Attribut in iFrames verwenden, um Inhalte von Drittanbietern einzubetten, für die keine Cross-Origin-Embedder-Richtlinie festgelegt ist
  • Und es gibt noch viele weitere Funktionen.

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

Pseudoklasse :picture-in-picture

Mit der Picture-in-Picture API können Websites ein schwebendes Videofenster erstellen, das immer im Vordergrund angezeigt wird, damit Nutzer weiterhin Medien konsumieren und gleichzeitig mit anderen Inhalten interagieren können.

Mit der :picture-in-picture-CSS-Pseudoklasse können Sie den Elementen Stile hinzufügen, um die Nutzerfreundlichkeit zu verbessern.

Das folgende Snippet zeigt, wie die Bild-im-Bild-Klasse verwendet wird, um dem Videocontainer eine Nachricht hinzuzufügen, die den Nutzer daran erinnert, dass das Video jetzt woanders wiedergegeben wird.

#video-container:has(video:picture-in-picture)::before {
  bottom: 36px;
  color: #ddd;
  content: 'Video is now playing in a Picture-in-Picture window';
  position: absolute;
  right: 36px;
}

Verwenden Sie die Pseudoklasse noch einmal für das Videoelement, um es transparent zu machen, damit die Nachricht richtig angezeigt wird.

Probieren Sie es aus und verbessern Sie die Wiedergabe von Bild-im-Bild-Videos.

Manifest-Element „launch_handler“

Mit der Launch Handler API können Sie steuern, wie Ihre Webanwendung gestartet wird. Beispielsweise, ob ein vorhandenes oder ein neues Fenster verwendet wird und ob das ausgewählte Fenster zur Start-URL weitergeleitet wird.

Sehen wir uns ein Beispiel an: Wenn Sie in einer Desktop-Umgebung eine App installieren und sie dann im Browser aufrufen, gibt es eine Schaltfläche, mit der Sie zum Fenster der eigenständigen App wechseln können. Bisher war es nur möglich, die App in einem neuen Fenster zu starten.

Mit dem Manifest-Element launch_handler können Web-Apps ihr Startverhalten jetzt anpassen.

Mit dem folgenden Snippet wird beispielsweise bei jedem Start der Webanwendung der Fokus auf ein vorhandenes App-Fenster gelegt und dieses geöffnet (falls vorhanden), anstatt immer ein neues Fenster zu öffnen.

{
 "launch_handler": {
   "client_mode": "navigate-new"
 }
}

credentialless iFrames.

Eine der größten Herausforderungen bei der ursprungsübergreifenden Isolierung besteht darin, dass für alle ursprungsübergreifenden iFrames COEP und CORP bereitgestellt werden müssen . Ein Iframe ohne diese Header wird vom Browser nicht geladen.

Mit dem Attribut credentialless können iFrames von Drittanbietern eingebettet werden, die diese Header nicht festlegen.

Bei credentialless wird der Iframe aus einem anderen, leeren Kontext geladen. Insbesondere wird es ohne Cookies geladen. Der Iframe beginnt mit einem leeren Cookie-Jar.

Ebenso laden und speichern Speicher-APIs wie LocalStorage und CacheStorage Daten in der neuen sitzungsspezifischen Partition. Dieser gesamte Speicherplatz wird freigegeben, sobald das Dokument auf oberster Ebene entladen wurde. Dadurch kann die COEP-Einschränkung aufgehoben werden.

In diesem Artikel erfährst du, wie du credentialless sicher verwenden kannst, um Inhalte von Drittanbietern in deine Iframes zu laden.

…und vieles mehr

Und natürlich gibt es noch viel mehr.

WebSQL wird jetzt in nicht sicheren Kontexten entfernt.

Mit der CSS-Eigenschaft initial-letter lässt sich die Anzahl der Zeilen festlegen, die ein Anfangsbuchstabe in den nachfolgenden Textzeilen vergehen soll.

FileSystemHandle enthält jetzt die Methode remove().

Weitere Informationen

Hier werden nur einige wichtige Highlights behandelt. Unter den folgenden Links finden Sie weitere Änderungen in Chrome 110.

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. Sobald Chrome 111 veröffentlicht wird, erzähle ich Ihnen hier, was es Neues in Chrome gibt.