Chrome 137 Beta

Rachel Andrew

Veröffentlicht am 1. Mai 2025

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 130 ist ab dem 30. April 2025 als Betaversion verfügbar. Sie können die aktuelle Version für Desktop unter Google.com oder im Google Play Store auf Android-Geräten herunterladen.

CSS und Benutzeroberfläche

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

Die if()-Funktion

Die CSS-Funktion if() bietet eine prägnante Möglichkeit, bedingte Werte auszudrücken. Sie akzeptiert eine Reihe von Bedingungs-Wert-Paaren, die durch Semikolons getrennt sind. Die Funktion wertet jede Bedingung sequenziell aus und gibt den Wert zurück, der der ersten wahren Bedingung zugeordnet ist. Wenn keine der Bedingungen als „true“ ausgewertet wird, gibt die Funktion einen leeren Tokenstream zurück. So können Sie komplexe bedingte Logik auf einfache und prägnante Weise ausdrücken. Beispiel:

div {
      color: var(--color);
      background-color: if(style(--color: white): black; else: white);
  }
  .dark {
      --color: black;
  }
  .light {
      --color: white;
  }

<div class="dark">dark</div>
<div class="light">light</div>

Die Properties reading-flow und reading-order

Mit der CSS-Eigenschaft reading-flow wird die Reihenfolge festgelegt, in der Elemente in einem Flex-, Grid- oder Blocklayout für Barrierefreiheitstools verfügbar gemacht und mit der Tabulatortaste fokussiert werden. Es kann einen der folgenden Keyword-Werte annehmen:

• normal
• flex-visual
• flex-flow
• grid-rows
• grid-columns
• grid-order
• source-order

Mit der CSS-Property reading-order können Sie die Reihenfolge in einem Container für den Lesefluss manuell überschreiben. Es handelt sich um eine Ganzzahl mit dem Standardwert 0.

Weitere Informationen finden Sie unter CSS-Lesefluss für die logische sequentielle Fokusnavigation verwenden. Beispiele für den Lesefluss sind ebenfalls verfügbar.

offset-path: shape()

Die Funktion shape() wird bereits in clip-path unterstützt und ermöglicht responsives Zuschneiden. Wenn Sie die Funktion auch für offset-path aktivieren, wird eine kleine Lücke geschlossen, da dieselbe Art von Form für diese Eigenschaft verwendet werden kann.

Unterstützung des Attributs „transform“ für SVGSVGElement

Mit dieser Funktion können Transformationseigenschaften wie Skalierung, Drehung, Verschiebung und Verzerrung direkt auf das <svg>-Stammelement angewendet werden. Dazu wird das Attribut „transform“ verwendet. Mit dieser Erweiterung können Sie das gesamte SVG-Koordinatensystem oder dessen Inhalt als Ganzes bearbeiten. So haben Sie mehr Flexibilität beim Erstellen dynamischer, responsiver und interaktiver Vektorgrafiken. Durch die Unterstützung dieses Attributs kann das SVG-Element transformiert werden, ohne dass zusätzliche Wrapper-Elemente oder komplexe CSS-Workarounds erforderlich sind. So wird die Erstellung skalierbarer und animierter Webgrafiken vereinfacht.

Ermöglichen Sie, dass <use> auf das Stammelement eines externen Dokuments verweist, indem Sie das Fragment weglassen.

Bei dieser Funktion wird das SVG-Element <use> optimiert, indem die Anforderungen an Referenzen gelockert werden. Derzeit müssen Sie explizit auf Fragmente im SVG-Dokument verweisen. Wenn keine Fragment-ID angegeben ist, kann <use> das Ziel nicht auflösen und es wird nichts gerendert oder referenziert.

Wenn Sie Fragmente weglassen oder nur den Namen der externen SVG-Datei angeben, wird automatisch auf das Stammelement verwiesen. Sie müssen das referenzierte Dokument also nicht ändern, nur um dem Stamm eine ID zuzuweisen. Diese Verbesserung vereinfacht den manuellen Bearbeitungsprozess und steigert die Effizienz.

Systemakzentfarbe für die accent-color-Eigenschaft auf Windows und ChromeOS ausgeweitet

So können Sie die Akzentfarbe des Betriebssystems für Formularelemente verwenden. Mit der CSS-Eigenschaft accent-color können Sie dafür sorgen, dass Formularelemente wie Kästchen, Optionsfelder und Fortschrittsanzeigen automatisch die Akzentfarbe des Betriebssystems des Nutzers übernehmen. Diese Funktion wird seit 2021 unter macOS unterstützt und ist jetzt auch für Windows und ChromeOS verfügbar.

view-transition-name: match-element

Der match-element-Wert für die view-transition-Eigenschaft generiert eine eindeutige ID basierend auf der Identität des Elements, die für dieses Element gleich bleibt. Dies wird in Single-Page-Apps verwendet, in denen das Element verschoben wird und Sie es mit einem Ansichtsübergang animieren möchten.

Web APIs

Fehlertyp für das Erstellen von WebAuthn-Anmeldedaten für „payment“ vereinheitlichen

Korrigiert den Fehlertyp, der beim Erstellen von WebAuthn-Anmeldedaten für payment-Anmeldedaten ausgegeben wird. Aufgrund einer früheren Spezifikationsdiskrepanz wurde beim Erstellen von payment-Anmeldedaten in einem plattformübergreifenden iFrame ohne Nutzeraktivierung ein SecurityError statt eines NotAllowedError geworfen, der bei Anmeldedaten für andere Zwecke auftritt. Dies ist eine funktionsgefährdende Änderung. Code, mit dem zuvor der Typ des ausgegebenen Fehlers erkannt wurde (z. B. e instanceof SecurityError), wäre betroffen. Code, der allgemein Fehler bei der Erstellung von Anmeldedaten behandelt (z. B. catch (e)), funktioniert weiterhin korrekt.

Blob-URL-Partitionierung: Abrufen/Navigation

Als Fortsetzung der Speicherpartitionierung wird die Partitionierung des Blob-URL-Zugriffs nach Speicherschlüssel (Website der obersten Ebene, Frame-Ursprung und das boolesche has-cross-site-ancestor-Attribut) implementiert, mit Ausnahme von Navigationen der obersten Ebene, die nur nach Frame-Ursprung partitioniert bleiben.

Diese Änderung kann vorübergehend rückgängig gemacht werden, indem Sie die Richtlinie PartitionedBlobURLUsage festlegen. Die Richtlinie wird eingestellt, wenn die anderen unternehmensbezogenen Richtlinien zur Speicherpartitionierung eingestellt werden.

Callstacks in Absturzberichten von nicht reagierenden Webseiten

Mit dieser Funktion wird der JavaScript-Aufrufstapel erfasst, wenn eine Webseite aufgrund von JavaScript-Code, der eine Endlosschleife oder eine andere sehr lange Berechnung ausführt, nicht mehr reagiert. So können Entwickler die Ursache für die fehlende Reaktion leichter ermitteln und beheben. Der JavaScript-Aufrufstack ist in der API für Absturzberichte enthalten, wenn der Grund „reagiert nicht“ ist.

Gleitkomma-Farbtypen für Arbeitsbereiche

Einführung der Möglichkeit, Gleitkomma-Pixelformate (im Gegensatz zu 8‑Bit-Festkomma) mit CanvasRenderingContext2D, OffscreenCanvasRenderingContext2D und ImageData zu verwenden. Dies ist für Anwendungen mit hoher Präzision (z. B. medizinische Visualisierung), Inhalte mit hohem Dynamikbereich und lineare Arbeitsfarbräume erforderlich.

Nicht vertrauenswürdiges Klartext-HTTP-Pre-Rendering nicht zulassen

Derzeit ist das Pre-Rendering über HTTP und HTTPS zulässig, während das Prefetching nur über HTTPS funktioniert. Vorrendern einschränken, um es an das Vorabrufen anzupassen

Richtlinie zur Dokumentisolation

Mit Document-Isolation-Policy kann ein Dokument crossOriginIsolation für sich selbst aktivieren, ohne COOP oder COEP bereitstellen zu müssen und unabhängig vom crossOriginIsolation-Status der Seite. Die Richtlinie wird durch Prozessisolation unterstützt. Außerdem werden die Nicht-CORS-Ressourcen aus anderen Quellen im Dokument entweder ohne Anmeldedaten geladen oder es ist ein CORP-Header erforderlich.

Weitere Informationen finden Sie unter Document Isolation Policy: Enable powerful web features with ease.

Ed25519 in der Web-Kryptografie

Mit dieser Funktion wird die Unterstützung für Curve25519-Algorithmen in der Web Cryptography API hinzugefügt, insbesondere für den Signaturalgorithmus Ed25519.

Protokolle und Berichte für IP-Adressen

Chrome Enterprise verbessert die Funktionen für das Sicherheitsmonitoring und Incident Response, indem lokale und Remote-IP-Adressen erfasst und gemeldet und an die Sicherheitsprüfprotokolle (Security Investigation Logs, SIT) gesendet werden. Außerdem können Administratoren mit Chrome Enterprise die IP-Adressen optional über den Chrome Enterprise Reporting Connector an SIEM-Anbieter (1P und 3P) senden. Diese Funktion ist für Chrome Enterprise Core-Kunden verfügbar.

JavaScript-Promise-Integration

JavaScript Promise Integration (JSPI) ist eine API, mit der WebAssembly-Anwendungen in JavaScript-Promises eingebunden werden können. Damit kann ein WebAssembly-Programm als Generator eines Promise fungieren und mit Promise-basierten APIs interagieren. Wenn eine Anwendung JSPI verwendet, um eine Promise-basierte (JavaScript-)API aufzurufen, wird der WebAssembly-Code angehalten. Der ursprüngliche Aufrufer des WebAssembly-Programms erhält ein Promise, das erfüllt wird, wenn das WebAssembly-Programm schließlich abgeschlossen ist.

Language Detector API

Die Language Detector API ist eine JavaScript API, mit der die Sprache eines angegebenen Strings erkannt wird. Diese API basiert auf einem zugrunde liegenden Modell, das für die Spracherkennung optimiert ist.

Die Language Detector API gibt für einen String eine geordnete Liste der erkannten Sprachen zusammen mit einem Konfidenzwert für jedes Ergebnis zurück.

Optional können Entwickler beim Erstellen einer Language Detector-Instanz eine Liste der erwarteten Eingabesprachen übergeben, um die Optimierung für Anwendungsfälle zu unterstützen, in denen die Erkennung für bestimmte Sprachen erwartet wird.

Gleitkommaattribute und ‑argumente für SVGMatrix, SVGRect und SVGPoint einschränken

Wenn Sie Gleitkommaattribute oder -argumente für SVGMatrix, SVGRect und SVGPoint festlegen, können Sie sie nicht mehr als Infinity oder Nan festlegen. Wenn Sie versuchen, sie festzulegen, wird eine JavaScript-Ausnahme ausgelöst, wie in der SVG-Spezifikation definiert.

Selection API getComposedRanges und direction

Diese Funktion umfasst zwei neue API-Methoden für die Selection API:

• Selection.direction, die die Richtung der Auswahl als "none", "forward" oder "backward" zurückgibt
• Selection.getComposedRanges() – Gibt eine Liste mit 0 oder 1 „zusammengesetzten“ StaticRange zurück.

Eine „zusammengesetzte“ StaticRange darf Schattenbegrenzungen überschreiten, was bei normalen Bereichen nicht möglich ist.

Beispiel:

const range = getSelection().getComposedRanges({ shadowRoots: [root] });

Wenn die Auswahl eine Shadow-Root-Grenze überschreitet, die nicht in der Liste shadowRoots enthalten ist, werden die Endpunkte von StaticRange so angepasst, dass sie außerhalb dieses Baums liegen. So wird verhindert, dass unbekannte Schattenbäume angezeigt werden.

Erweiterungen des Web-App-Bereichs

Fügt ein scope_extensions App-Manifestfeld für Web-Apps hinzu, mit dem Web-Apps ihren Bereich auf andere Ursprünge ausweiten können.

Beispiel:

{
  "name": "Example",
  "display": "standalone",
  "start_url": "/index.html",
  "scope_extensions": [
    {"type" : "type", "origin" : "https://example.com"}
  ]
}

So können Websites, die mehrere Subdomains und Top-Level-Domains verwalten, als einzelne Web-App präsentiert werden.

Erfordert, dass die aufgeführten Ursprünge die Zuordnung zur Web-App mit einer .well-known/web-app-origin-association-Konfigurationsdatei bestätigen.

{
  "https://sample-app.com/": {
    "scope": "/"
  }
}

WebAssembly-Branch-Hints

Verbessert die Leistung von kompiliertem WebAssembly-Code, indem die Engine darüber informiert wird, dass eine bestimmte Verzweigungsanweisung sehr wahrscheinlich einen bestimmten Pfad einschlägt. So kann die Engine bessere Entscheidungen für das Code-Layout treffen (wodurch die Anzahl der Instruction-Cache-Treffer erhöht wird) und Register besser zuweisen.

WebGPU: GPUTextureView für externalTexture-Bindung

Eine GPUTextureView darf jetzt für eine externalTexture-Bindung verwendet werden, wenn eine GPUBindGroup erstellt wird.

WebGPU: copyBufferToBuffer-Überlastung

Die Methode GPUCommandEncoder copyBufferToBuffer() bietet jetzt eine einfachere Möglichkeit, ganze Puffer zu kopieren. Dazu wird eine neue Überladung mit optionalen Offset- und Größenparametern verwendet.

Neue Ursprungstests

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

Attribut zum Blockieren des Renderns mit voller Framerate

Fügt den blockierenden Attributen ein neues Render-Blocking-Token mit voller Bildrate hinzu. Wenn der Renderer mit dem Token für die volle Framerate blockiert wird, arbeitet er mit einer niedrigeren Framerate, um mehr Ressourcen für das Laden zu reservieren.

Medienwiedergabe in nicht gerenderten iFrames pausieren

Fügt eine "media-playback-while-not-rendered"-Berechtigungsrichtlinie hinzu, damit Einbettungswebsites die Medienwiedergabe von eingebetteten iFrames pausieren können, die nicht gerendert werden, d. h. deren „display“-Attribut auf „none“ gesetzt ist. So können Entwickler nutzerfreundlichere Anwendungen erstellen und die Leistung verbessern, indem sie die Wiedergabe von Inhalten, die für Nutzer nicht sichtbar sind, dem Browser überlassen.

Rewriter API

Die Rewriter API transformiert und formuliert eingegebenen Text auf die gewünschte Weise um. Dabei wird ein On-Device-KI-Language Model verwendet. Entwickler können diese API verwenden, um Redundanzen in einem Text zu entfernen, damit er in ein Wortlimit passt, Nachrichten für die Zielgruppe umzuformulieren oder konstruktiver zu gestalten, wenn in einer Nachricht toxische Sprache verwendet wird, Beiträge oder Artikel umzuformulieren, um einfachere Wörter und Konzepte zu verwenden, und vieles mehr.

Writer API

Die Writer API kann verwendet werden, um auf Grundlage eines Prompts für eine Schreibaufgabe neues Material zu erstellen. Dabei wird ein On-Device-Language Model verwendet. Entwickler können diese API verwenden, um Textbeschreibungen strukturierter Daten zu generieren, einen Beitrag über ein Produkt auf Grundlage von Rezensionen oder Produktbeschreibungen zu verfassen, Pro- und Kontra-Listen in vollständige Ansichten zu erweitern und vieles mehr.