Chrome 133 Beta

Rachel Andrew

Veröffentlicht: 15. Januar 2024

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 133 ist seit dem 15. Januar 2024 als Betaversion verfügbar. Sie können die neueste Version auf Google.com für Computer oder im Google Play Store für Android herunterladen.

CSS und Benutzeroberfläche

Diese Version enthält sieben neue CSS- und UI-Funktionen.

Erweiterte CSS-attr()-Funktion

Implementiert die in CSS Level 5 angegebene Erweiterung von attr(), die neben <string> auch Typen zulässt und in allen CSS-Eigenschaften verwendet werden kann (zusätzlich zur vorhandenen Unterstützung für das Pseudo-Element content).

Weitere Informationen finden Sie unter CSS attr() wird aktualisiert.

CSS-Pseudoklasse :open

Die Pseudoklasse :open entspricht <dialog> und <details>, wenn sie geöffnet sind, und <select> und <input>, wenn sie sich in einem Modus befinden, in dem eine Auswahl angezeigt wird.

Containerabfragen für den CSS-Scrollstatus

Mit Containerabfragen können Sie untergeordnete Container basierend auf ihrem Scrollstatus formatieren.

Der Abfragecontainer ist entweder ein Scrollcontainer oder ein Element, das von der Scrollposition eines Scrollcontainers beeinflusst wird. Die folgenden Status können abgefragt werden:

  • stuck: Ein fix positionierter Container ist an einem der Ränder des Scrollfelds angeklebt.
  • snapped: Ein Container, der an einem Scroll-Snap ausgerichtet ist, ist derzeit horizontal oder vertikal angedockt.
  • scrollable: Gibt an, ob ein Scroll-Container in eine abgefragte Richtung gescrollt werden kann.

Mit einer neuen container-type: scroll-state können Container abgefragt werden.

#sticky {
  position: sticky;
  container-type: scroll-state;
}

@container scroll-state(stuck: top) {
  #sticky-child {
    font-size: 75%;
  }
}

Weitere Informationen finden Sie in CSS scroll-state().

Preisvergleichsportale text-box, text-box-trim und text-box-edge

Mit den Eigenschaften text-box-trim und text-box-edge sowie der Kurzschreibweise text-box können Sie die vertikale Textausrichtung genauer steuern, um ein optimales Gleichgewicht zwischen Textinhalten zu erreichen.

Mit der Property text-box-trim werden die Seiten angegeben, die zu trimmen sind (oben oder unten), und mit der Property text-box-edge wird angegeben, wie die Kante zu trimmen ist.

Mit diesen Eigenschaften können Sie den vertikalen Abstand mithilfe der Schriftmetriken genau steuern. Weitere Informationen finden Sie unter CSS text-box-trim.

Der hint-Wert des popover-Attributs

Die Popover API gibt das Verhalten für zwei Werte des Attributs popover an: auto und manual. Dieses Element beschreibt einen dritten Wert, popover=hint. Hinweise, die am häufigsten mit dem Verhalten des Typs „Tooltip“ verknüpft sind, verhalten sich etwas anders. Der Hauptunterschied besteht darin, dass ein hint einem auto untergeordnet ist, wenn verschachtelte Stapel von Pop-ups geöffnet werden. So ist es möglich, ein unabhängiges hint-Pop-up zu öffnen, während ein vorhandener Stapel von auto-Pop-ups geöffnet bleibt.

Das klassische Beispiel ist eine geöffnete <select>-Auswahl (popover=auto) mit einer durch Bewegen des Mauszeigers ausgelösten Kurzinfo (popover=hint). Dadurch wird die Auswahl <select> nicht geschlossen.

Verbesserungen bei der Positionierung von Pop-up-Auslösern und Ankern

Mit popover.showPopover({source}) können Sie auf imperative Weise Aufruferbeziehungen zwischen Pop-ups festlegen. Ermöglicht es, über Aufruferbeziehungen implizite Verweise auf Ankerelemente zu erstellen.

Ein Pop-up, das im Auslöser verschachtelt ist, sollte nicht noch einmal aufgerufen werden

Im folgenden Fall wird das Pop-up durch Klicken auf die Schaltfläche korrekt aktiviert. Das Pop-up sollte sich jedoch nicht schließen, wenn Sie danach auf das Pop-up selbst klicken.

<button popovertarget=foo>Activate
  <div popover id=foo>Clicking me shouldn't close me</div>
</button>

Bisher war das der Fall, weil der Klick auf das Pop-up-Fenster zum <button> gelangte und den Auslöser aktivierte, wodurch das Pop-up-Fenster geschlossen wurde. Das ist jetzt nicht mehr der Fall.

Web APIs

Animation.overallProgress

Bietet Entwicklern eine praktische und einheitliche Darstellung, wie weit eine Animation in ihren Iterationen fortgeschritten ist, unabhängig von der Art der Zeitachse. Ohne die Property „overallProgress“ müssen Sie manuell berechnen, wie weit eine Animation fortgeschritten ist. Dabei müssen Sie die Anzahl der Iterationen der Animation und die Frage berücksichtigen, ob die overallProgress der Animation ein Prozentsatz der Gesamtzeit (wie bei scrollgesteuerten Animationen) oder eine absolute Zeitmenge (wie bei zeitgesteuerten Animationen) ist.currentTime

Die pause()-Methode des Atomics-Objekts

Fügen Sie dem Namespaceobjekt Atomics die Methode pause() hinzu, um der CPU zu signalisieren, dass der aktuelle Code einen Spinlock ausführt.

CSP-Hash-Berichte für Scripts

Bei komplexen Webanwendungen müssen aus Sicherheitsgründen häufig die heruntergeladenen Unterressourcen im Blick behalten werden.

Insbesondere erfordern anstehende Branchenstandards und Best Practices (z. B. PCI-DSS v4), dass Webanwendungen ein Inventar aller Scripts führen, die sie herunterladen und ausführen.

Diese Funktion basiert auf CSP und der Reporting API, um die URLs und Hashes (für CORS/gleicher Ursprung) aller Scriptressourcen zu melden, die das Dokument lädt.

Umzug unter Beibehaltung des DOM-Status

Hiermit wird ein DOM-Primitive (Node.prototype.moveBefore) hinzugefügt, mit dem Sie Elemente in einem DOM-Baum verschieben können, ohne den Status des Elements zurückzusetzen.

Wenn Sie Elemente verschieben, anstatt sie zu entfernen und einzufügen, wird der folgende Status beibehalten:

  • <iframe> Elemente bleiben geladen.
  • Der Fokus bleibt auf dem aktiven Element.
  • Pop-ups, Vollbild- und modale Dialogfelder bleiben geöffnet.
  • CSS-Übergänge und -Animationen werden fortgesetzt.

attributionsrc-Attribut für <area> freigeben

Hiermit wird die Sichtbarkeit des Attributs attributionsrc auf <area> an das vorhandene Verarbeitungsverhalten des Attributs angepasst, auch wenn es nicht sichtbar war.

Außerdem ist es sinnvoll, das Attribut für <area> zu unterstützen, da dieses Element eine Navigationsoberfläche erster Klasse ist und Chrome dies bereits für die anderen Oberflächen von <a> und window.open unterstützt.

Grob geschätzte renderTime-Werte für mehrere Ursprünge im Element-Timing und LCP angeben (unabhängig von Timing-Allow-Origin)

Elementzeit und LCP-Einträge haben ein renderTime-Attribut, das dem ersten Frame entspricht, in dem ein Bild oder Text gerendert wurde.

Dieses Attribut wird derzeit für plattformübergreifende Bilder geschützt, indem für die Bildressource ein Timing-Allow-Origin-Header erforderlich ist. Diese Einschränkung lässt sich jedoch leicht umgehen, indem Sie beispielsweise ein Bild mit gleicher und unterschiedlicher Herkunft im selben Frame anzeigen.

Da dies zu Verwirrung geführt hat, planen wir, diese Einschränkung zu entfernen und stattdessen alle Renderingzeiten um 4 ms zu verlängern, wenn das Dokument nicht plattformübergreifend isoliert ist. Dies ist anscheinend grob genug, um das Austreten nützlicher Informationen zur Dekodierungszeit von plattformübergreifenden Bildern zu verhindern.

Die FileSystemObserver-Oberfläche

Über die FileSystemObserver-Benutzeroberfläche werden Websites über Änderungen am Dateisystem benachrichtigt. Websites überwachen Änderungen an Dateien und Verzeichnissen, für die der Nutzer zuvor die Berechtigung erteilt hat, auf dem lokalen Gerät des Nutzers oder im Bucket-Dateisystem (auch als Origin Private File System bezeichnet) und werden über grundlegende Änderungsinformationen wie den Änderungstyp benachrichtigt.

Einfrieren im Energiesparmodus

Wenn der Energiesparmodus aktiv ist, friert Chrome eine „Browserkontextgruppe“ ein, die seit mehr als fünf Minuten ausgeblendet und inaktiv ist, wenn eine Untergruppe von Frames mit demselben Ursprung einen CPU-Nutzungsgrenzwert überschreitet, es sei denn:

  • Bietet Audio- oder Videokonferenzfunktionen (wird durch die Identifizierung von Mikrofon, Kamera oder Bildschirm-/Fenster-/Tab-Aufnahme oder einer RTCPeerConnection mit einem „offenen“ RTCDataChannel oder einem „live“-MediaStreamTrack erkannt).
  • Steuert ein externes Gerät, das mit WebUSB, Web Bluetooth, WebHID oder Web Serial erkannt wird.
  • Hält eine Websperre oder eine IndexedDB-Verbindung, die ein Versionsupdate oder eine Transaktion über eine andere Verbindung blockiert.

Beim Einfrieren wird die Ausführung pausiert. Sie ist in der Page Lifecycle API formal definiert.

Der Grenzwert für die CPU-Auslastung wird so kalibriert, dass etwa 10% der Tabs im Hintergrund eingefroren werden, wenn der Energiesparmodus aktiv ist.

Mehrere Importkarten

Importkarten müssen derzeit vor jedem ES-Modul geladen werden und es kann nur eine Importkarte pro Dokument geben. Das macht sie in der Praxis anfällig und möglicherweise langsam: Jedes Modul, das vor ihnen geladen wird, bricht die gesamte App ab. In Apps mit vielen Modulen werden sie zu einer großen blockierenden Ressource, da zuerst die gesamte Map für alle möglichen Module geladen werden muss.

Mit dieser Funktion können mehrere Importkarten pro Dokument verwendet werden, indem sie auf konsistente und deterministische Weise zusammengeführt werden.

Header für den Zugriff auf den Speicher

Bietet eine alternative Möglichkeit für authentifizierte Einbettungen, nicht partitionierte Cookies zu aktivieren. Diese Header geben an, ob nicht partitionierte Cookies in einer bestimmten Netzwerkanfrage enthalten sind (oder sein können). Außerdem können Server bereits gewährte Berechtigungen für den Speicherzugriff aktivieren. Wenn du eine alternative Möglichkeit zur Aktivierung der Berechtigung „storage-access“ anbietest, können auch Ressourcen ohne Iframe verwendet werden. Außerdem kann die Latenz für authentifizierte Einbettungen reduziert werden.

Unterstützung beim Erstellen von ClipboardItem mit Promise<DOMString>

Der ClipboardItem, der die Eingabe für die asynchrone Zwischenablagemethode write() ist, akzeptiert jetzt zusätzlich zu Blobs auch Stringwerte in seinem Konstruktor. ClipboardItemData kann ein Blob, ein String oder ein Versprechen sein, das in einen Blob oder einen String aufgelöst wird.

WebAssembly Memory64

Der memory64-Vorschlag fügt Unterstützung für lineare WebAssembly-Speicher mit einer Größe von mehr als 2 hoch 32 Bit hinzu. Es enthält keine neuen Anweisungen, sondern erweitert die vorhandenen Anweisungen, um 64‑Bit-Indexe für Speicher und Tabellen zu ermöglichen.

​​Web Authentication API: PublicKeyCredential getClientCapabilities()-Methode

Mit der PublicKeyCredential-getClientCapabilities()-Methode können Sie ermitteln, welche WebAuthn-Funktionen vom Client des Nutzers unterstützt werden. Die Methode gibt eine Liste der unterstützten Funktionen zurück, sodass Entwickler die Authentifizierung und Workflows an die spezifischen Funktionen des Clients anpassen können.

WebGPU: Vertex-Formate mit einer Komponente (und unorm8x4-bgra)

Es werden zusätzliche Vertex-Formate hinzugefügt, die in der ursprünglichen Version von WebGPU aufgrund fehlender Unterstützung oder alter macOS-Versionen (die von keinem Browser mehr unterstützt werden) nicht vorhanden waren. Mit den 1-Komponenten-Eckpunktformaten können Anwendungen nur die erforderlichen Daten anfordern, während sie zuvor bei 8‑ und 16‑Bit-Datentypen mindestens doppelt so viele anfordern mussten. Mit dem unorm8x4-bgra-Format können BGRA-codierte Vertexfarben etwas einfacher geladen werden, während derselbe Shader verwendet wird.

X25519-Algorithmus der Web Cryptography API

Der Algorithmus „X25519“ bietet Tools zur Schlüsselvereinbarung mit der in [RFC7748] beschriebenen X25519-Funktion. Die Algorithmus-ID „X25519“ kann in der SubtleCrypto-Schnittstelle verwendet werden, um auf die implementierten Vorgänge zuzugreifen: generateKey, importKey, exportKey, deriveKey und deriveBits.

Neue Ursprungstests

In Chrome 133 können Sie die folgenden neuen Tests für Ursprünge aktivieren.

Einfrieren im Energiesparmodus deaktivieren

Mit diesem Test können Websites das Einfrieren im Energiesparmodus deaktivieren, das in Chrome 133 eingeführt wurde.

Einstellung und Entfernung von Produkten und Funktionen

In dieser Version von Chrome werden die unten aufgeführten Funktionen eingestellt oder entfernt. Auf ChromeStatus.com finden Sie Listen mit geplanten, aktuellen und früheren Einstellungen.

Mit dieser Version von Chrome wird eine Funktion eingestellt.

Einstellung des WebGPU-Limits maxInterStageShaderComponents

Der maxInterStageShaderComponents limit wird aufgrund einer Kombination von Faktoren eingestellt. Das geplante Datum der Entfernung in Chrome 135.

  • Redundanz mit maxInterStageShaderVariables: Diese Grenze dient bereits einem ähnlichen Zweck, nämlich der Kontrolle der Datenmenge, die zwischen Shader-Phasen übergeben wird.
  • Geringfügige Abweichungen: Es gibt zwar geringfügige Unterschiede bei der Berechnung der beiden Limits, diese Unterschiede sind jedoch gering und können innerhalb des maxInterStageShaderVariables-Limits effektiv verwaltet werden.
  • Vereinfachung: Durch das Entfernen von maxInterStageShaderComponents wird die Shader-Oberfläche optimiert und die Komplexität für Entwickler reduziert. Anstatt zwei separate Limits mit subtilen Unterschieden zu verwalten, können sie sich auf die passendere und umfassendere maxInterStageShaderVariables konzentrieren.

Mit dieser Version von Chrome werden zwei Funktionen entfernt.

Bisher ignorierte Chrome bei der Vorab-Abfrage einer Ressource mit <link rel=prefetch> die Cache-Semantik (nämlich max-age und no-cache) bei der ersten Verwendung innerhalb von fünf Minuten, um ein erneutes Abrufen zu vermeiden. Jetzt entfernt Chrome diesen Sonderfall und verwendet die normale HTTP-Cache-Semantik.

Webentwickler müssen also entsprechende Caching-Header (Cache-Control oder Expires) einfügen, um die Vorteile von <link rel=prefetch> zu nutzen.

Das betrifft auch die nicht standardmäßige <link rel=prerender>.

Auslösen der Chrome-Willkommensseite mit Tabs für die ersten Einstellungen bei der Erstausführung entfernen

Das Einfügen von chrome://welcome in die Eigenschaft first_run_tabs der Datei initial_preferences hat jetzt keine Auswirkungen mehr. Diese Seite wurde entfernt, da sie mit der Erstausführung auf Computerplattformen redundant ist.