Nieuw in Chrome 137,Nieuw in Chrome 137

Rachel Andrew

Gepubliceerd: 27 mei 2025

Chrome 137 wordt nu uitgerold en in dit bericht worden enkele belangrijke functies van deze release besproken. Lees de volledige release-opmerkingen van Chrome 137 .

Belangrijkste punten uit dit persbericht:

Gebruik reading-flow en reading-order om een ​​logische tabvolgorde te garanderen in complexe lay-outs. De CSS-functie if() biedt een beknopte manier om voorwaardelijke waarden uit te drukken. JavaScript Promise Integration (JSPI) maakt het mogelijk om WebAssembly-applicaties te integreren met JavaScript-promises.

CSS reading-flow en reading-order

De CSS-eigenschap ` reading-flow bepaalt de volgorde waarin elementen in een flex-, grid- of block-layout worden weergegeven aan toegankelijkheidstools en hoe ze worden gefocust met behulp van lineaire sequentiële navigatiemethoden. Dit lost een al lang bestaand probleem op met grid- en flex-layouts, waarbij de tabvolgorde soms niet meer overeenkomt met de volgorde waarin de elementen zijn weergegeven.

Het accepteert één sleutelwoordwaarde, met als standaardwaarde ' normal , wat het gedrag van het ordenen van elementen in de DOM-volgorde behoudt. Om het in een flexcontainer te gebruiken, stelt u de waarde in op flex-visual of flex-flow . Om het in een gridcontainer te gebruiken, stelt u de waarde in op grid-rows , grid-columns ' of grid-order '.

Met de CSS-eigenschap ` reading-order kunt u handmatig de volgorde van items binnen een leesstroomcontainer wijzigen. Om deze eigenschap te gebruiken in een grid-, flex- of block-container, stelt u de waarde van reading-flow van de container in op ` source-order en stelt u de reading-order van elk afzonderlijk item in op een integerwaarde.

Lees voor meer informatie: Gebruik CSS reading-flow voor logische, opeenvolgende focusnavigatie .

CSS if() functie

De CSS-functie if() biedt een beknopte manier om voorwaardelijke waarden uit te drukken. De functie accepteert een reeks voorwaarde-waardeparen, gescheiden door puntkomma's. Elke voorwaarde wordt achtereenvolgens geëvalueerd en de functie retourneert de waarde die hoort bij de eerste voorwaarde die waar is. Als geen van de voorwaarden waar is, retourneert de functie een lege tokenstroom.

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)

JavaScript Promise Integration (JSPI) is een API waarmee WebAssembly-applicaties kunnen integreren met JavaScript-promises.

Het stelt een WebAssembly-programma in staat om als generator van een promise te fungeren, en het stelt het WebAssembly-programma in staat om te interageren met promise-ondersteunende API's.

In het bijzonder, wanneer een applicatie JSPI gebruikt om een ​​promise-bevattende (JavaScript) API aan te roepen, wordt de WebAssembly-code opgeschort; en de oorspronkelijke aanroeper van het WebAssembly-programma krijgt een promise die zal worden vervuld wanneer het WebAssembly-programma uiteindelijk is voltooid.

En nog veel meer!

Natuurlijk is er nog veel meer:

  • In navolging van de bestaande opslagpartitionering heeft Chrome de toegang tot blob-URL's gepartitioneerd op basis van de opslagsleutel.
  • Canvas-pixelformaten met drijvende-kommaweergave zijn nu geïmplementeerd.
  • offset-path: shape() wordt ondersteund, zodat je responsieve vormen kunt gebruiken om het animatiepad in te stellen.

Verder lezen

Dit is slechts een greep uit de belangrijkste wijzigingen. Raadpleeg de volgende links voor meer informatie over de wijzigingen in Chrome 137.

Abonneren

Om op de hoogte te blijven, abonneer je op het YouTube-kanaal van Chrome Developers . Je ontvangt dan een e-mailmelding zodra we een nieuwe video publiceren. Of volg ons op X of LinkedIn voor nieuwe artikelen en blogberichten.

Zodra Chrome 138 is uitgebracht, laten we je hier meteen weten wat er nieuw is in Chrome!