Chrome 123 Beta

Sofern nicht anders angegeben, gelten die folgenden Änderungen für die neueste Betaversion der Chrome-Betaversion für Android, ChromeOS, Linux, macOS und Windows. Weitere Informationen zu den hier aufgeführten Funktionen finden Sie unter den bereitgestellten Links oder in der Liste auf ChromeStatus.com. Chrome 123 ist seit dem 21. Februar 2024 als Betaversion verfügbar. Du kannst die neuesten Versionen auf Google.com für Computer oder im Google Play Store unter Android herunterladen.

CSS

In dieser Version werden fünf neue CSS-Funktionen hinzugefügt.

CSS-Farbfunktion light-dark()

Mit der Funktion light-dark() in CSS können Entwickler Farbschemata leichter an den hellen oder dunklen Modus eines Nutzers anpassen.

Verwenden Sie light-dark(), um zwei verschiedene Farbwerte innerhalb einer einzelnen CSS-Eigenschaft anzugeben. Der Browser (oder das Gerät) wählt anhand des berechneten color-scheme-Werts des Elements automatisch die entsprechende Farbe aus. Verwenden Sie zum Beispiel den folgenden CSS-Code:

  • Wenn der Nutzer ein helles Design ausgewählt hat, hat das .target-Element einen hellgrünen Hintergrund.
  • Wenn der Nutzer ein dunkles Design ausgewählt hat, hat das .target-Element einen grünen Hintergrund.
html {
  color-scheme: light dark;
}
.target {
    background-color: light-dark(lime, green);
}

CSS-Anzeigemodus „Bild im Bild“

Die CSS-Medienfunktion display-mode wird für den picture-in-picture-Wert unterstützt. Dadurch können Webentwickler spezifische CSS-Regeln schreiben, die nur dann angewendet werden, wenn die Web-App im Bild-im-Bild-Modus angezeigt wird.

Weitere Informationen zu dieser Medienfunktion findest du in der Bild-im-Bild-Dokumentation.

CSS-Eigenschaft „align-content“ für Blockierungen

Die CSS-Eigenschaft align-content wird jetzt in Blockcontainern und Tabellenzellen unterstützt. Bisher wurde diese Eigenschaft nur bei Raster- und flexiblen Elementen unterstützt. display: block, display: list-item und display: table-cell können jetzt beispielsweise mithilfe von align-content ausgerichtet werden.

Weitere Informationen finden Sie unter Unterstützung für align-content in Block- und Tabellenlayouts.

Die CSS-Eigenschaft field-sizing

Mit der Eigenschaft field-sizing können Entwickler feste Standardgrößen von Formularsteuerelementen deaktivieren und ihre Größe von ihrem Inhalt abhängig machen. So lassen sich automatisch vergrößerte Textfelder erstellen.

Die CSS-Eigenschaft text-spacing-trim

Diese Eigenschaft wendet die Unterschneidung auf chinesische, japanische und koreanische Satzzeichen (CJK) an, um eine optisch ansprechende Typografie zu erzeugen, die in JLREQ (Anforderungen für japanische Textlayouts) und CLREQ (Anforderungen für chinesische Textlayouts) definiert ist.

Viele CJK-Satzzeichen enthalten Abstände zwischen Glyphen und Innenräumen. Zum Beispiel haben der CJK-Punkt und die schließende CJK-Klammer in der Regel auf der rechten Hälfte der Glyphenräume Abstände zwischen den Glyphen, um ihnen einen konstanten Fortschritt als andere ideografische Zeichen zu ermöglichen. Wenn sie jedoch hintereinander erscheinen, sind die symbolträchtigen internen Abstände übermäßig. Mit dieser Funktion werden solche exzessiven Abstände angepasst.

Das Attribut text-spacing-trim akzeptiert einen der folgenden vier Werte: normal, trim-start, space-all und space-first. Weitere Informationen finden Sie unter Vier neue internationale Funktionen in Preisvergleichsportalen.

Web APIs

Erstellen von WebAuthn-Anmeldedaten in einem ursprungsübergreifenden iFrame zulassen

Mit dieser Funktion können Webentwickler WebAuthn-Anmeldedaten (also „publickey“-Anmeldedaten, sogenannte Passkeys) in ursprungsübergreifenden iFrames erstellen. Für diese neue Funktion sind zwei Bedingungen erforderlich:

  • Der iFrame hat eine publickey-credentials-create-feature-Berechtigungsrichtlinie.
  • Der iFrame hat eine vorübergehende Nutzeraktivierung.

Dadurch können Entwickler Passkeys in eingebetteten Szenarien erstellen, z. B. nach einer Identitätsweitergabe, bei der die vertrauende Partei eine föderierte Identität bereitstellt.

Feature-Set für Attributionsberichte

In Chrome 123 werden der Attribution Reporting API Filter für Triggerdaten und Filter für aggregierte Werte hinzugefügt. Schwerpunkte sind dabei:

  • Zusätzliche API-Konfigurierbarkeit für Berichte auf Ereignisebene durch Unterstützung der Anpassung von Triggerdatenkardinalität und -werten.
  • Zusätzliche API-Konfigurierbarkeit für zusammenfassende Berichte durch die Unterstützung von Filtern in aggregierbaren Werten

App- und Web-Attributionsmessung

Erweitert die Attribution Reporting API, sodass Conversions im Web Ereignissen in anderen Anwendungen, die außerhalb des Browsers auftreten, zugeordnet werden können.

Der Vorschlag macht sich die Zuordnung auf Betriebssystemebene zunutze. Insbesondere kann der Entwickler zulassen, dass Ereignisse im mobilen Web mit Ereignissen in der Privacy Sandbox von Android verknüpft werden können, obwohl auch andere Plattformen unterstützt werden könnten.

blocking=render für Inline-Modul-Skripts

Dies ist eine kleine Änderung, durch die eine künstliche Einschränkung von <script blocking="render"> aufgehoben wird. Vor dieser Änderung erfordert <script blocking="render"type="module"> ein src-Attribut, auch wenn dieser src ein Daten-URI ist. Das ist eine unnötige Einschränkung, da Inline-Modulskripts, die andere Skripts importieren, weiterhin in der Lage sein, das Rendering zu blockieren.

Der Grund dafür ist, dass bei dokumentenübergreifenden Ansichtsübergängen häufig Skripts zur Anpassung verwendet werden, die das Rendering blockieren. Deshalb sollte diese Funktion unterstützt werden, wenn Skripts, die das Rendering blockieren, einfacher erstellt werden können.

Bild-im-Bild-Modus von Dokumenten: focus() API erlauben, den Öffnender zu fokussieren

Sie können jetzt opener.focus() aus einem Bild-im-Bild-Fenster eines Dokuments verwenden, um den Fokus auf Systemebene auf den Tab zu lenken, zu dem das Bild-im-Bild-Fenster des Dokuments gehört.

Dadurch können Entwickler den ursprünglichen Tab bei Bedarf wieder im Vordergrund anzeigen. Das ist beispielsweise der Fall, wenn der Nutzer auf eine UI zugreifen muss, die nicht in das kleinere Bild-im-Bild-Fenster passt.

Syntax für Importattribute von with

Importattribute sind eine JavaScript-Funktion, mit der Importdeklarationen annotiert werden können, z. B. import xxx from "mod" with { type: "json" }. Chrome hat ursprünglich eine frühere Version des Angebots (in Chrome 91) mit assert als Keyword gesendet. Diese Version wurde dann aktualisiert, um with zu verwenden. Aufgrund von Änderungen, die bei der Einbindung in HTML für JSON- und CSS-Module erforderlich waren, wurde diese Version aktualisiert.

jitterBufferTarget

Mit dem Attribut jitterBufferTarget können Anwendungen eine Zieldauer in Millisekunden für Medien angeben, die der Jitter-Zwischenspeicher RTCRtpReceiver beibehalten soll. Dies beeinflusst den Umfang der Zwischenspeicherung durch den User-Agent, was sich wiederum auf erneute Übertragungen und die Wiederherstellung nach Paketverlust auswirkt. Durch das Ändern des Zielwerts können Anwendungen den Kompromiss zwischen der Wiedergabeverzögerung und dem Risiko steuern, dass aufgrund von Netzwerkjitter keine Audio- oder Videoframes ausgehen.

Timing des langen Animationsframes

Die Long Animation Frames API ist eine Erweiterung der Long Tasks API. Dabei wird die Aufgabe zusammen mit der anschließenden Renderingaktualisierung gemessen. Dabei werden Informationen wie lange laufende Skripts, Renderingzeit und ein erzwungenes Layout und Stil hinzugefügt, was als Layout-Chrashing bezeichnet wird.

Entwickler können dies als Diagnose für die mit INP gemessene „Langsamkeit“ verwenden, indem sie die Ursachen für eine Überlastung des Hauptthreads ermitteln, die häufig die Ursache für fehlerhaften INP ist.

In der NavigationActivation-Oberfläche wird navigation.activation hinzugefügt. Hier wird der Status gespeichert, an dem das aktuelle Dokument aktiviert wurde (z. B. wann es initialisiert oder aus dem Back-Forward-Cache wiederhergestellt wurde).

Das bedeutet, dass Entwickler angepasste Seiten anbieten können, die darauf basieren, von wo aus der Nutzer navigiert ist. Führen Sie beispielsweise eine andere Animation aus, wenn der Nutzer von der Startseite kommt.

Pagereveal-Ereignis

Das pagereveal-Ereignis wird bei der ersten Renderingmöglichkeit im Fensterobjekt eines Dokuments ausgelöst, nachdem ein Dokument erstmals geladen, aus dem Back-Forward-Cache wiederhergestellt oder über ein Pre-Rendering aktiviert wurde.

Er kann von einem Seitenautor verwendet werden, um einen Seiteneintrag einzurichten, z. B. einen Wechsel von einem vorherigen Status.

PointerEvent.deviceId für das Schreiben mit mehreren Stiften

Da Geräte mit erweiterten Stift-Eingabefunktionen immer häufiger verwendet werden, ist es wichtig, dass sich die Webplattform auch weiter weiterentwickelt, um diese erweiterten Funktionen vollständig zu unterstützen. So können sowohl Endnutzer als auch Entwickler umfassende Erlebnisse bieten. Ein solcher Fortschritt besteht darin, dass der Digitalisierer eines Geräts mehr als ein Stiftgerät erkennen kann, das gleichzeitig mit ihm interagiert. Diese Funktion ist eine Erweiterung der PointerEvent-Schnittstelle um das neue Attribut deviceId, das eine sitzungsbeständige, dokumentenisolierte, eindeutige Kennung darstellt, die ein Entwickler zuverlässig zur Identifizierung einzelner Stifte verwenden kann, die mit der Seite interagieren.

Private Netzwerkzugriffsprüfungen für Navigationsanfragen: Modus „Nur Warnung“

Bevor Website A zu einer anderen Website B im privaten Netzwerk des Nutzers navigiert, geschieht Folgendes:

  1. Prüft, ob die Anfrage aus einem sicheren Kontext initiiert wurde.
  2. Sendet eine Preflight-Anfrage und prüft, ob B mit einem Header antwortet, der den privaten Netzwerkzugriff zulässt.

Es gibt bereits Features für Unterressourcen und Worker, diese Ergänzung gilt jedoch speziell für Navigationsanfragen.

Diese Prüfungen dienen zum Schutz des privaten Netzwerks des Nutzers. Da sich diese Funktion im Modus „Nur Warnung“ befindet, schlägt die Anfrage nicht fehl, wenn eine der Prüfungen fehlschlägt. Stattdessen wird in den Entwicklertools eine Warnung angezeigt, um Entwicklern bei der Vorbereitung auf die bevorstehende Erzwingung zu helfen.

Sec-CH-UA-Form-Factor-Kundenhinweis

Dieser Hinweis gibt den Formfaktor des User-Agents oder Geräts an, damit die Website die Antwort anpassen kann.

Service Worker Static Routing API

Mit dieser API können Entwickler das Routing konfigurieren und einfache Aufgaben von Service-Workern auslagern. Wenn die Bedingung erfüllt ist, erfolgt die Navigation, ohne Service Worker zu starten oder JavaScript auszuführen. So können Webseiten Leistungseinbußen vermeiden, die durch das Abfangen von Service Workern entstehen. Weitere Informationen finden Sie im vorherigen Blogpost zu dieser API.

Update für freigegebenen Speicher

Mit diesem Update können ursprungsübergreifende Worklets ausgeführt werden, ohne dass ein iFrame erstellt werden muss.

zstd-Inhaltscodierung

Zstandard oder zstd ist ein in RFC8878 beschriebener Datenkomprimierungsmechanismus. Dabei handelt es sich um einen schnellen verlustfreien Komprimierungsalgorithmus, der auf Echtzeit-Komprimierungsszenarien auf zlib-Ebene und bessere Komprimierungsverhältnisse abzielt. Das zstd-Token wurde als IANA-registriertes Content-Encoding-Token hinzugefügt.

Durch die Unterstützung von zstd als Content-Encoding werden Seiten schneller geladen und es wird weniger Bandbreite in Anspruch genommen. Außerdem werden weniger Zeit, CPU und Energie für die Komprimierung auf unseren Servern benötigt, was zu geringeren Serverkosten führt.

Neue Ursprungstests

In Chrome 123 können Sie die folgenden neuen Ursprungstests aktivieren.

JavaScript-Promise-Integration von WebAssembly

Damit responsive Anwendungen, die mit WebAssembly geschrieben wurden, unterstützt werden können, müssen Funktionen bereitgestellt werden, mit denen WebAssembly-Programme ausgesetzt und fortgesetzt werden können.

Der primäre erste Anwendungsfall für die Promise-Integration besteht darin, WebAssembly-Programmen, deren Quelle auf synchronen APIs basiert, die Verwendung asynchroner APIs zu ermöglichen, die auf der Webplattform immer häufiger verwendet werden.

Registrieren Sie sich für den Ursprungstest der Promise-Integration.

Entfernungen

In Chrome 123 wird die folgende Funktion entfernt.

Der window-placement-Alias für die Berechtigungsrichtlinie window-management

In Chrome 111 wurde window-management als Alias für window-placement-Berechtigungs- und Berechtigungsrichtlinienstrings hinzugefügt. Dies war Teil eines größeren Aufwands, die Strings umzubenennen, indem window-placement schließlich eingestellt und entfernt wurde. Durch diese Änderung der Terminologie wird die Langlebigkeit des Deskriptors verbessert, da sich die Window Management API im Laufe der Zeit weiterentwickelt.

Die Warnungen zur Einstellung des Alias window-placement wurden in Chrome 113 eingeführt und werden nun entfernt.