Neu in Chrome 137

Rachel Andrew

Veröffentlicht am 27. Mai 2025

Chrome 137 wird jetzt eingeführt. In diesem Beitrag werden einige der wichtigsten Funktionen der Version vorgestellt. Vollständige Versionshinweise zu Chrome 137

Highlights dieser Version:

Verwenden Sie reading-flow und reading-order, um bei komplexen Layouts eine logische Tab-Reihenfolge zu gewährleisten. Die CSS-Funktion if() bietet eine prägnante Möglichkeit, bedingte Werte auszudrücken. Mit der JavaScript Promise Integration (JSPI) können WebAssembly-Anwendungen in JavaScript-Promises eingebunden werden.

CSS-reading-flow und reading-order

Mit der CSS-Eigenschaft reading-flow wird die Reihenfolge gesteuert, in der Elemente in einem Flex-, Grid- oder Blocklayout für Barrierefreiheitstools verfügbar gemacht werden und wie sie mit linearen sequenziellen Navigationsmethoden fokussiert werden. Damit wird ein langjähriges Problem mit Raster- und Flex-Layouts behoben, bei dem die Tab-Reihenfolge von der Reihenfolge abweichen kann, in der die Elemente angeordnet sind.

Es wird ein Keyword-Wert mit dem Standardwert normal verwendet, der das Verhalten der Anordnung von Elementen in der DOM-Reihenfolge beibehält. Wenn Sie die Eigenschaft in einem Flex-Container verwenden möchten, legen Sie ihren Wert auf flex-visual oder flex-flow fest. Wenn Sie die Eigenschaft in einem Grid-Container verwenden möchten, legen Sie ihren Wert auf grid-rows, grid-columns oder grid-order fest.

Mit der CSS-Eigenschaft reading-order können Sie die Reihenfolge von Elementen in einem Container für den Lesefluss manuell überschreiben. Wenn Sie diese Eigenschaft in einem Grid-, Flex- oder Block-Container verwenden möchten, legen Sie den Wert reading-flow für den Container auf source-order und den Wert reading-order für das einzelne Element auf einen ganzzahligen Wert fest.

Weitere Informationen finden Sie unter CSS-Eigenschaft reading-flow für die logische sequentielle Fokusnavigation verwenden.

CSS-Funktion if()

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.

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>

WebAssembly JavaScript Promise Integration (JSPI)

JSPI (JavaScript Promise Integration) 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.

…und vieles mehr

Natürlich gibt es noch viel mehr:

  • Als Fortsetzung der Speicherpartitionierung hat Chrome die Partitionierung des Blob-URL-Zugriffs nach Speicherschlüssel implementiert.
  • Gleitkomma-Pixelformate für Canvas sind jetzt implementiert.
  • offset-path: shape() wird unterstützt, sodass Sie den Animationspfad mit responsiven Formen festlegen können.

Weitere Informationen

Hier werden nur einige wichtige Punkte behandelt. Unter den folgenden Links finden Sie weitere Änderungen in Chrome 137.

Abonnieren

Wenn Sie auf dem Laufenden bleiben möchten, abonnieren Sie den YouTube-Kanal Chrome Developers. Sie erhalten dann eine E-Mail-Benachrichtigung, wenn wir ein neues Video veröffentlichen. Oder folgen Sie uns auf X oder LinkedIn, um neue Artikel und Blogposts zu erhalten.

Sobald Chrome 138 veröffentlicht wird, informieren wir Sie hier über die Neuerungen in Chrome.