Chrome 133 Beta

Rachel Andrew

Veröffentlicht: 15. Januar 2024

Sofern nicht anders angegeben, gelten die folgenden Änderungen für die neueste Chrome-Betaversion 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 aktuelle Version für Computer auf Google.com oder für Android im Google Play Store herunterladen.

CSS und Benutzeroberfläche

In dieser Version werden sieben neue CSS- und UI-Funktionen eingeführt.

Erweiterte attr()-Funktion für Preisvergleichsportale

Implementiert die Erweiterung für attr(), die in CSS Level 5 angegeben ist. Dadurch können neben <string> auch andere Typen verwendet werden und die Erweiterung kann in allen CSS-Properties eingesetzt werden (zusätzlich zur vorhandenen Unterstützung für das Pseudoelement content).

Weitere Informationenattr()

CSS-Pseudoklasse :open

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

CSS-Containerabfragen für den Scrollstatus

Mit Containerabfragen können Sie untergeordnete Elemente von Containern 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 Container mit fester Positionierung ist an einem der Ränder des Scrollbereichs fixiert.
  • snapped: Ein Container mit Scroll-Snap-Ausrichtung ist derzeit horizontal oder vertikal eingerastet.
  • scrollable: Gibt an, ob ein Scroll-Container in eine abgefragte Richtung gescrollt werden kann.

Mit einem 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 Informationenscroll-state()

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

Um ein optimales Gleichgewicht von Textinhalten zu erreichen, ermöglichen die Attribute text-box-trim und text-box-edge sowie das Attribut text-box eine genauere Steuerung der vertikalen Ausrichtung von Text.

Mit der Eigenschaft text-box-trim werden die zu trimmenden Seiten (oben oder unten) angegeben und mit der Eigenschaft text-box-edge wird festgelegt, wie die Kante getrimmt werden soll.

Mit diesen Eigenschaften können Sie den vertikalen Abstand mithilfe der Schriftartmesswerte genau steuern. Weitere Informationen

Der hint-Wert des popover-Attributs

Die Popover API gibt das Verhalten für zwei Werte des Attributs popover an: auto und manual. Dieses Feature beschreibt einen dritten Wert: popover=hint. Hinweise, die meist mit Tooltip-Verhalten verknüpft sind, haben ein etwas anderes Verhalten. Der Hauptunterschied besteht darin, dass ein hint untergeordnet ist, wenn verschachtelte Stapel von Pop-overs geöffnet werden.auto So ist es möglich, ein unabhängiges hint-Pop-over zu öffnen, während ein vorhandener Stapel von auto-Pop-overs geöffnet bleibt.

Das kanonische Beispiel ist, dass eine <select>-Auswahl geöffnet ist (popover=auto) und eine durch den Mauszeiger ausgelöste Kurzinfo (popover=hint) angezeigt wird. Dadurch wird die <select>-Auswahl nicht geschlossen.

Verbesserungen bei der Positionierung von Popover-Aufrufern und ‑Ankern

Fügt eine imperative Möglichkeit hinzu, Aufruferbeziehungen zwischen Pop-overs mit popover.showPopover({source}) festzulegen. Ermöglicht es, mit Invoker-Beziehungen implizite Anker-Elementreferenzen zu erstellen.

Popover, das in Invoker verschachtelt ist, sollte nicht noch einmal aufgerufen werden

Im folgenden Fall wird das Popover durch Klicken auf die Schaltfläche richtig aktiviert. Wenn Sie danach auf das Popover klicken, sollte es jedoch nicht geschlossen werden.

<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-over an das <button> weitergeleitet wurde und den Aufrufer aktiviert hat, wodurch das Pop-over geschlossen wurde. Das Verhalten wurde nun geändert.

Web APIs

Animation.overallProgress

Bietet Entwicklern eine praktische und einheitliche Darstellung des Fortschritts einer Animation über ihre Iterationen hinweg und unabhängig von der Art des Zeitachse. Ohne die overallProgress-Eigenschaft müssen Sie manuell berechnen, wie weit eine Animation fortgeschritten ist. Dabei müssen Sie die Anzahl der Wiederholungen der Animation berücksichtigen und feststellen, ob die currentTime der Animation ein Prozentsatz der Gesamtzeit (wie bei scrollgesteuerten Animationen) oder eine absolute Zeitangabe (wie bei zeitgesteuerten Animationen) ist.

Die Methode pause() des Objekts Atomics

Fügt dem Namespace-Objekt Atomics die Methode pause() hinzu, um der CPU mitzuteilen, dass der aktuelle Code einen Spinlock ausführt.

CSP-Hash-Berichte für Scripts

Komplexe Webanwendungen müssen aus Sicherheitsgründen oft die heruntergeladenen Unterressourcen im Blick behalten.

Insbesondere bei anstehenden Branchenstandards und Best Practices (z. B. PCI-DSS v4) ist es erforderlich, dass Webanwendungen ein Inventar aller heruntergeladenen und ausgeführten Skripts führen.

Dieses Feature basiert auf CSP und der Reporting API, um die URLs und Hashes (für CORS/Same-Origin) aller Skriptressourcen zu melden, die das Dokument lädt.

DOM-Status beibehaltender Umzug

Fügt ein DOM-Primitive (Node.prototype.moveBefore) hinzu, 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, bleiben die folgenden Status erhalten:

  • <iframe> Elemente bleiben geladen.
  • Das aktive Element bleibt im Fokus.
  • Pop-overs, Vollbild- und modale Dialogfelder bleiben geöffnet.
  • CSS-Übergänge und ‑Animationen werden fortgesetzt.

attributionsrc-Attribut für <area> verfügbar machen

Die Darstellung des Attributs attributionsrc auf <area> wird an das vorhandene Verarbeitungsverhalten des Attributs angepasst, auch wenn es nicht dargestellt wurde.

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

Grobe ursprungsübergreifende renderTime in Element-Timing und LCP verfügbar machen (unabhängig von Timing-Allow-Origin)

Element-Timing- und LCP-Einträge haben ein renderTime-Attribut, das auf den ersten Frame ausgerichtet ist, in dem ein Bild oder Text gerendert wurde.

Derzeit ist für dieses Attribut bei Bildern, die von einer anderen Quelle stammen, ein Timing-Allow-Origin-Header für die Bildressource erforderlich. Diese Einschränkung lässt sich jedoch leicht umgehen, z. B. indem Sie ein Bild vom selben Ursprung und ein ursprungsübergreifendes Bild im selben Frame anzeigen.

Da dies zu Verwirrung geführt hat, planen wir, diese Einschränkung zu entfernen und stattdessen alle Rendering-Zeiten um 4 ms zu verlängern, wenn das Dokument nicht ursprungsübergreifend isoliert ist. Das ist anscheinend grob genug, um zu vermeiden, dass nützliche Informationen zur Dekodierungszeit über Bilder mit unterschiedlichen Ursprüngen preisgegeben werden.

responseStart wiederherstellen und firstResponseHeadersStart einführen

Wenn 103 Early Hints aktiviert ist, haben Antworten zwei Zeitstempel:

  • Wenn Early Hints eintreffen (103)
  • Wenn die endgültigen Header eintreffen (z.B. 200)

Als Chrome 115 ausgeliefert wurde firstInterimResponseStart, um die Messung dieser beiden Zeitstempel zu ermöglichen, haben wir auch die Bedeutung von responseStart (verwendet von Zeit bis zum ersten Byte (TTFB)) in „die endgültigen Headern“ geändert. Dadurch entstand ein Problem mit der Webkompatibilität bei Browsern und Tools, die keine ähnliche Änderung für diesen häufig verwendeten Messwert vorgenommen haben.

In Chrome 133 wird diese responseStart-Änderung rückgängig gemacht, um dieses Kompatibilitätsproblem zu beheben. Stattdessen wird firstResponseHeadersStart eingeführt, damit Websites die Zeit bis zu den endgültigen Headern messen können, während die ursprüngliche Definition von TTFB beibehalten wird.

Die FileSystemObserver-Schnittstelle

Die FileSystemObserver-Schnittstelle benachrichtigt Websites über Änderungen am Dateisystem. Websites beobachten Ä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 „Browsing-Kontextgruppe“ ein, die seit mehr als fünf Minuten ausgeblendet und stummgeschaltet ist, wenn eine Untergruppe von Frames mit demselben Ursprung darin einen CPU-Nutzungsschwellenwert überschreitet, es sei denn:

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

Das Einfrieren besteht darin, die Ausführung zu pausieren. Sie ist in der Page Lifecycle API formal definiert.

Der CPU-Nutzungsschwellenwert wird so kalibriert, dass bei aktiviertem Energiesparmodus etwa 10% der Hintergrundtabs eingefroren werden.

Mehrere Importkarten

Importzuordnungen müssen derzeit vor jedem ES-Modul geladen werden und es kann nur eine Importzuordnung pro Dokument geben. Das macht sie anfällig und potenziell langsam in realen Szenarien: Jedes Modul, das vor ihnen geladen wird, führt dazu, dass die gesamte App nicht mehr funktioniert. In Apps mit vielen Modulen werden sie zu einer großen blockierenden Ressource, da zuerst die gesamte Karte für alle möglichen Module geladen werden muss.

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

Header für den Speicherzugriff

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), und ermöglichen es Servern, bereits gewährte „storage-access“-Berechtigungen zu aktivieren. Wenn Sie eine alternative Möglichkeit zum Aktivieren der Berechtigung „storage-access“ anbieten, können Sie sie für Ressourcen verwenden, die nicht in iFrames eingebettet sind. Außerdem kann die Latenz für authentifizierte Einbettungen verringert werden.

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

Das ClipboardItem, das die Eingabe für die asynchrone Zwischenablage-Methode write() ist, akzeptiert jetzt neben Blobs auch String-Werte in seinem Konstruktor. ClipboardItemData kann ein Blob, ein String oder ein Promise sein, das entweder in einem Blob oder einem String aufgelöst wird.

WebAssembly Memory64

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

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

Mit der PublicKeyCredential-Methode getClientCapabilities() 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 Authentifizierungsabläufe und Workflows an die spezifischen Funktionen des Clients anpassen können.

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

Fügt zusätzliche Vertex-Formate hinzu, 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 sind. Mit den Vertex-Formaten mit einer Komponente können Anwendungen nur die erforderlichen Daten anfordern, während sie zuvor mindestens doppelt so viele Daten für 8- und 16-Bit-Datentypen anfordern mussten. Das Format „unorm8x4-bgra“ erleichtert das Laden von BGRA-codierten Vertex-Farben bei Verwendung desselben Shaders.

X25519-Algorithmus der Web Cryptography API

Der Algorithmus „X25519“ bietet Tools zum Ausführen von Schlüsselvereinbarungen mit der in [RFC7748] angegebenen X25519-Funktion. Die Algorithmuskennung „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 Origin-Trials aktivieren.

Einfrieren im Energiesparmodus deaktivieren

Mit diesem Testzeitraum können Websites die Deaktivierung im Energiesparmodus deaktivieren, die in Chrome 133 eingeführt wird.

Einstellung und Entfernung

In dieser Version von Chrome werden die unten aufgeführten Einstellungen und Entfernungen eingeführt. Auf ChromeStatus.com finden Sie Listen mit geplanten, aktuellen und früheren Entfernungen.

In dieser Version von Chrome wird eine Funktion eingestellt.

WebGPU-Limit „maxInterStageShaderComponents“ einstellen

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

  • Redundanz mit maxInterStageShaderVariables: Dieses Limit erfüllt bereits einen ähnlichen Zweck, indem es die Menge der Daten steuert, die zwischen Shader-Phasen übertragen werden.
  • Geringfügige Abweichungen: Die beiden Grenzwerte werden zwar leicht unterschiedlich berechnet, die Unterschiede sind jedoch gering und können effektiv innerhalb des maxInterStageShaderVariables-Grenzwerts berücksichtigt werden.
  • Vereinfachung: Durch das Entfernen von maxInterStageShaderComponents wird die Shader-Schnittstelle optimiert und die Komplexität für Entwickler reduziert. Statt zwei separate Limits mit geringfügigen Unterschieden zu verwalten, können sie sich auf das umfassendere maxInterStageShaderVariables konzentrieren, dessen Name besser passt.

In dieser Version von Chrome werden zwei Funktionen entfernt.

Bisher hat Chrome die Cache-Semantik (nämlich max-age und no-cache) für die erste Verwendung innerhalb von fünf Minuten ignoriert, wenn eine Ressource mit <link rel=prefetch> vorab abgerufen wurde, um ein erneutes Abrufen zu vermeiden. In Chrome wird dieser Sonderfall nun entfernt und es werden normale HTTP-Cache-Semantiken verwendet.

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

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

Auslösen der Chrome-Willkommensseite durch Tabs für den ersten Start mit anfänglichen Einstellungen entfernen

Wenn Sie chrome://welcome in das Attribut first_run_tabs der Datei initial_preferences einfügen, hat das keine Auswirkungen mehr. Diese Seite wurde entfernt, da sie mit der ersten Ausführung, die auf Desktop-Plattformen ausgelöst wird, redundant ist.