Chrome 123 Beta

Sofern nicht anders angegeben, gelten die folgenden Änderungen für die neueste Version des Chrome-Betakanals für Android, ChromeOS, Linux, macOS und Windows. Weitere Informationen zu den hier aufgeführten Funktionen finden Sie über die bereitgestellten Links oder in der Liste auf ChromeStatus.com. Chrome 123 befindet sich seit dem 21. Februar 2024 in der Betaphase. Sie können die neueste Version auf Google.com für Computer oder im Google Play Store für Android herunterladen.

CSS

Diese Version enthält fünf neue CSS-Funktionen.

CSS-Farbfunktion light-dark()

Mit der light-dark()-Funktion in CSS können Entwickler das Farbschema einfacher an die Präferenz des Nutzers für den hellen oder dunklen Modus anpassen.

Mit light-dark() können Sie zwei verschiedene Farbwerte innerhalb einer einzelnen CSS-Eigenschaft angeben. Der Browser (oder das Gerät) wählt automatisch die passende Farbe basierend auf dem berechneten color-scheme-Wert des Elements aus. Beispiel:

• Wenn der Nutzer ein helles Design ausgewählt hat, hat das Element .target einen limettengrünen Hintergrund.
• Wenn der Nutzer ein dunkles Design ausgewählt hat, hat das Element .target einen grünen Hintergrund.

html {
  color-scheme: light dark;
}
.target {
    background-color: light-dark(lime, green);
}

Bild-im-Bild-Modus von Preisvergleichsportalen

Die CSS-Medienfunktion display-mode wird für den Wert picture-in-picture unterstützt. So können Webentwickler bestimmte CSS-Regeln schreiben, die nur angewendet werden, wenn (ein Teil) der Webanwendung im Bild-im-Bild-Modus angezeigt wird.

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

CSS-Eigenschaft „align-content“ für Blöcke

Die CSS-Property align-content wird jetzt für Blockcontainer und Tabellenzellen unterstützt. Bisher wurde dieses Attribut nur für Grid- und Flex-Elemente unterstützt. So können beispielsweise display: block, display: list-item und display: table-cell jetzt mit align-content ausgerichtet werden.

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

Die CSS-Property field-sizing

Mit der Property field-sizing können Entwickler die festen Standardgrößen von Formularelementen deaktivieren und die Größe von Formularelementen vom Inhalt abhängig machen. So können Sie Textfelder erstellen, die automatisch wachsen.

Die CSS-Property text-spacing-trim

Mit dieser Eigenschaft wird das Kerning auf Satzzeichen in Chinesisch, Japanisch und Koreanisch (CJK) angewendet, um eine visuell ansprechende Typografie gemäß JLREQ (Anforderungen an das japanische Textlayout) und CLREQ (Anforderungen an das chinesische Textlayout) zu erzielen.

Viele CJK-Satzzeichen enthalten Glyphen-interne Abstände. Beispielsweise haben der CJK-Punkt und die CJK-Schließende Klammer in der Regel glypheninterne Abstände in der rechten Hälfte ihrer Glyphenräume, um ihnen einen konstanten Vorlauf wie bei anderen ideografischen Zeichen zu geben. Wenn sie jedoch in einer Zeile erscheinen, werden die Abstände zwischen den einzelnen Zeichen zu groß. Mit dieser Funktion wird ein solcher übermäßiger Abstand angepasst.

Für das Attribut text-spacing-trim sind die folgenden vier Werte zulässig: normal, trim-start, space-all und space-first. Weitere Informationen finden Sie im Hilfeartikel 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 (d. h. „Public-Key“-Anmeldedaten, auch Passkeys genannt) in Cross-Origin-Iframes erstellen. Für diese neue Funktion gelten zwei Bedingungen:

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

So können Entwickler Passkeys in eingebetteten Szenarien erstellen, z. B. nach einem Identitätsbestätigungsvorgang, bei dem die vertrauende Seite eine föderierte Identität bereitstellt.

Attributionsberichte

Chrome 123 fügt der Attribution Reporting API Triggerdatenanpassungen und aggregierbare Wertfilter hinzu, die sich auf Folgendes konzentrieren:

• Die API kann jetzt für Berichte auf Ereignisebene noch besser konfiguriert werden, da die Kardinalität und Werte von Triggerdaten angepasst werden können.
• Zusätzliche API-Konfigurationsmöglichkeiten für Zusammenfassungsberichte durch Unterstützung von Filtern in aggregierten Werten.

App- und webübergreifende Attributionsmessung

Die Attribution Reporting API wird erweitert, um Conversions im Web Ereignissen außerhalb des Browsers in anderen Anwendungen zuordnen zu können.

Bei diesem Vorschlag wird die Unterstützung für die Attribution auf Betriebssystemebene genutzt. Insbesondere können Entwickler so Ereignisse im mobilen Web mit Ereignissen in der Privacy Sandbox von Android verknüpfen. Die Unterstützung anderer Plattformen kann ebenfalls implementiert werden.

blocking=render in Inline-Modulscripts

Durch diese kleine Änderung wird eine künstliche Einschränkung von <script blocking="render"> aufgehoben. Vor dieser Änderung war für <script blocking="render"type="module"> ein src-Attribut erforderlich, auch wenn es sich bei diesem src um einen Daten-URI handelte. Dies ist eine unnötige Einschränkung, da Inline-Modulscripts, die andere Scripts importieren, weiterhin Renderblöcke enthalten sollten.

Der Grund dafür ist, dass für die Ansichtsübergänge zwischen Dokumenten häufig renderblockierende Scripts zur Anpassung verwendet werden. Wenn die Erstellung solcher Scripts einfacher wird, lässt sich diese Funktion unterstützen.

Bild-im-Bild-Ansicht für Dokumente: der focus() API erlauben, den Öffner zu fokussieren

Sie können jetzt über das Bild-im-Bild-Fenster eines Dokuments die Tastenkombination opener.focus() verwenden, um den Fokus auf Systemebene auf den Tab zu legen, zu dem das Bild-im-Bild-Fenster des Dokuments gehört.

So können Entwickler bei Bedarf den ursprünglichen Tab wieder in den Vordergrund bringen. Das kann beispielsweise der Fall sein, wenn der Nutzer auf eine Benutzeroberfläche zugreifen muss, die nicht in das kleinere Bild-im-Bild-Fenster passt.

with-Syntax für Importattribute

Importattribute sind eine JavaScript-Funktion, mit der Importdeklarationen wie import xxx from "mod" with { type: "json" } annotiert werden können. In Chrome 91 wurde ursprünglich eine frühere Version des Vorschlags mit assert als Keyword bereitgestellt. Diese Version wurde dann auf with aktualisiert, da einige Änderungen erforderlich waren, um sie in HTML for JSON- und CSS-Module einzubinden.

jitterBufferTarget

Mit dem jitterBufferTarget-Attribut können Anwendungen eine Zieldauer in Millisekunden für die Medien angeben, die der RTCRtpReceiver-Jitter-Puffer aufnehmen soll. Dies wirkt sich auf die Menge der Pufferung durch den User-Agent aus, was wiederum Auswirkungen auf die Wiederholungen und die Wiederherstellung von Paketverlusten hat. Durch Ändern des Zielwerts können Anwendungen den Trade-off zwischen Wiedergabeverzögerung und dem Risiko steuern, dass aufgrund von Netzwerkjitter nicht genügend Audio- oder Videoframes vorhanden sind.

Timing für Long Animation Frame

Die Long Animation Frames API ist eine Erweiterung der Long Tasks API. Dabei wird die Aufgabe zusammen mit dem nachfolgenden Rendering-Update gemessen. Es werden Informationen wie lang laufende Scripts, die Renderingzeit und die Zeit für das erzwungene Layout und den erzwungenen Stil hinzugefügt, was als Layout-Trashing bezeichnet wird.

Entwickler können dies als Diagnose für „Lag“, gemessen am INP, verwenden, indem sie die Ursachen für die Überlastung des Hauptthreads ermitteln, die häufig die Ursache für einen schlechten INP ist.

Hinweis: Seit dem ursprünglichen Test wurden einige Änderungen an der Long Animation Frame Timing API vorgenommen.

NavigationActivation

Die NavigationActivation-Benutzeroberfläche fügt navigation.activation hinzu. Hier wird gespeichert, wann das aktuelle Dokument aktiviert wurde, z. B. wenn es initialisiert oder aus dem Back-Forward-Cache wiederhergestellt wurde.

Das bedeutet, dass Entwickler personalisierte Seiten anbieten können, je nachdem, woher der Nutzer weitergeleitet wurde. Sie können beispielsweise eine andere Animation ausführen, wenn der Nutzer von der Startseite gekommen ist.

Ereignis „pagereveal“

Das Ereignis pagereveal wird beim ersten Rendern nach dem Initialisieren, Wiederherstellen aus dem Back-Forward-Cache oder Aktivieren aus einem Pre-Render für das Fensterobjekt eines Dokuments ausgelöst.

Mithilfe dieses Ereignisses können Seitenautoren die Aufrufabfolge einer Seite einrichten, z. B. einen Ansichtsübergang aus einem vorherigen Status.

PointerEvent.deviceId für die gleichzeitige Eingabe mit mehreren Stiften

Da Geräte mit erweiterten Eingabemöglichkeiten per Eingabestift immer häufiger werden, ist es wichtig, dass die Webplattform kontinuierlich weiterentwickelt wird, um diese erweiterten Funktionen vollständig zu unterstützen und so sowohl Endnutzern als auch Entwicklern mehr Möglichkeiten zu bieten. Eine solche Verbesserung ist die Fähigkeit des Digitizers eines Geräts, mehrere Eingabestifte gleichzeitig zu erkennen. Diese Funktion ist eine Erweiterung der PointerEvent-Benutzeroberfläche um ein neues Attribut, deviceId. Es handelt sich dabei um eine eindeutige, sitzungsspezifische und dokumentisolierte Kennung, mit der Entwickler zuverlässig einzelne Stifte identifizieren können, die mit der Seite interagieren.

Prüfungen des privaten Netzwerkzugriffs für Navigationsanfragen: Nur-Warnung-Modus

Bevor Website A zu einer anderen Website B im privaten Netzwerk des Nutzers navigiert, führt diese Funktion Folgendes aus:

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

Es gibt bereits Funktionen für untergeordnete Ressourcen und Worker, aber diese Ergänzung ist speziell für Navigationsanfragen konzipiert.

Diese Prüfungen dienen dem Schutz des privaten Netzwerks des Nutzers. Da es sich bei dieser Funktion um den Modus „Nur Warnung“ handelt, schlagen Anfragen nicht fehl, wenn eine der Prüfungen fehlschlägt. Stattdessen wird in den Entwicklertools eine Warnung angezeigt, um Entwickler bei der Vorbereitung auf die bevorstehende Erzwingung zu unterstützen.

Dieser Beitrag wurde aktualisiert, um die Erläuterung zur Lockerung der Zugriffsberechtigung für gemischte Inhalte zu entfernen. Diese Änderung ist jetzt für Chrome 124 geplant.

Client-Hinweis „Sec-CH-UA-Form-Factor“

Dieser Hinweis gibt den „Formfaktor“ des User-Agents oder Geräts an, damit die Website ihre 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 Starten von Service Workern oder Ausführen von JavaScript. So können auf Webseiten Leistungseinbußen durch Service Worker-Abfangen vermieden werden. Weitere Informationen finden Sie im vorherigen Blogpost zu dieser API.

Aktualisierung des Shared Storage

Dieses Update unterstützt das Ausführen von ursprungsübergreifenden Worklets, ohne dass ein IFrame erstellt werden muss.

Zstd-Inhaltscodierung

Zstandard (zstd) ist ein Datenkomprimierungsmechanismus, der in RFC 8878 beschrieben ist. Es ist ein schneller verlustfreier Komprimierungsalgorithmus, der auf Echtzeitkomprimierungsszenarien auf zlib-Ebene und bessere Komprimierungsverhältnisse ausgerichtet ist. Das zstd-Token wurde als IANA-registriertes Content-Encoding-Token hinzugefügt.

Durch die Unterstützung von zstd als Content-Codierung werden Seiten schneller geladen, es wird weniger Bandbreite verbraucht und es werden weniger Zeit, CPU und Energie für die Komprimierung auf unseren Servern benötigt. Das führt zu geringeren Serverkosten.

Neue Ursprungstests

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

WebAssembly-JavaScript-Promise-Integration

Um responsive Anwendungen zu unterstützen, die mit WebAssembly geschrieben wurden, sind Funktionen erforderlich, mit denen WebAssembly-Programme angehalten und fortgesetzt werden können.

Der primäre 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 vorkommen.

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

Entfernen

In Chrome 123 wird die folgende Funktion entfernt.

Der Alias window-placement für die Berechtigung und 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 Projekts, die Strings umzubenennen, indem window-placement eingestellt und entfernt wurde. Durch die Änderung der Terminologie wird die Langlebigkeit des Descriptors verbessert, da sich die Window Management API im Laufe der Zeit weiterentwickelt.

Seit Chrome 113 werden Warnungen zur Einstellung des Alias window-placement angezeigt. Er wird jetzt entfernt.