Neu in Chrome 110

Adriana Jara

Dazu sollten Sie Folgendes wissen:

  • Mit der neuen Pseudoklasse :picture-in-picture können Sie Ihren Bild-im-Bild-Elementen einen benutzerdefinierten Stil hinzufügen.
  • Legen Sie das Startverhalten für Webanwendungen mit launch_handler in Ihrem Manifest fest.
  • das Attribut credentialless in iFrames verwenden, um Inhalte von Drittanbietern einzubetten, für die keine ursprungsübergreifende Einbettungsrichtlinie festgelegt ist
  • Und es gibt viele weitere.

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

:Bild-im-Bild-Pseudoklasse

Mit der Picture-in-Picture API können Websites ein unverankertes Videofenster erstellen, das immer im Vordergrund ist. So können Nutzer weiter Medien konsumieren, während sie mit anderen Inhalten interagieren.

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

Das folgende Snippet zeigt, wie Sie die Bild-im-Bild-Klasse verwenden, um dem Video-Container eine Nachricht hinzuzufügen, die den Nutzer daran erinnert, dass das Video jetzt an einem anderen Ort 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 wieder die Pseudoklasse für das Videoelement, um das Element transparent zu machen und die Nachricht korrekt anzuzeigen.

Sehen Sie sich das Beispiel an und optimieren Sie die Bild-im-Bild-Videoqualität.

Manifest-Mitglied „launch_handler“.

Mit der Launch Handler API können Sie steuern, wie Ihre Web-App gestartet wird, z. B. ob ein vorhandenes oder ein neues Fenster verwendet wird und ob über das ausgewählte Fenster die Start-URL aufgerufen wird.

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

Web-Apps können jetzt mit dem launch_handler-Manifestmitglied ihr Startverhalten anpassen.

Das folgende Snippet führt beispielsweise dazu, dass sich alle Starts dieser Web-App auf ein vorhandenes App-Fenster konzentrieren und zu diesem navigieren (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 nicht vom Browser geladen.

Mit dem Attribut credentialless lassen sich Drittanbieter-iFrames einbetten, in denen diese Header nicht festgelegt werden.

Mit credentialless wird der iFrame aus einem anderen, leeren Kontext geladen. Insbesondere wird sie ohne Cookies geladen. Der iFrame beginnt mit einer leeren Cookie-JAR-Datei.

Ebenso laden und speichern Speicher-APIs wie LocalStorage, CacheStorage usw. Daten in die neue sitzungsspezifische Partition. Der gesamte Speicherplatz wird gelöscht, nachdem das Dokument der obersten Ebene entladen wurde. Dadurch kann die COEP-Einschränkung aufgehoben werden.

In diesem Artikel erfahren Sie, wie Sie Inhalte von Drittanbietern sicher mit credentialless in Ihre iFrames laden können.

…und vieles mehr

Und natürlich gibt es noch viel mehr.

Web SQL wird jetzt in nicht sicheren Kontexten entfernt.

Mit der CSS-Eigenschaft initial-letter lässt sich die Anzahl der Zeilen festlegen, die ein Buchstabe in die folgenden Textzeilen vertieft werden soll.

FileSystemHandle enthält jetzt eine remove()-Methode.

Weitere Informationen

Dies sind nur einige der wichtigsten Punkte. Unter den folgenden Links finden Sie weitere Informationen zu weiteren Änderungen in Chrome 110.

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.

Ich bin Adriana Jara. Sobald Chrome 111 veröffentlicht wird, informiere ich Sie über die neuesten Funktionen in Chrome.