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 de release besproken. Lees de volledige release-opmerkingen voor Chrome 137 .

Hoogtepunten uit deze release:

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

CSS reading-flow en reading-order

De CSS-eigenschap ' reading-flow bepaalt de volgorde waarin elementen in een flex-, raster- of bloklay-out worden weergegeven aan toegankelijkheidstools en hoe ze worden gefocust met behulp van lineaire sequentiële navigatiemethoden. Dit lost een al lang bestaand probleem met raster- en flexlay-outs op, waarbij de tabvolgorde los kan raken van de volgorde waarin de items worden weergegeven.

Het accepteert één sleutelwoordwaarde, met als standaardwaarde normal , waardoor elementen in DOM-volgorde blijven. 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 grid-order .

Met de CSS-eigenschap ' reading-order kunt u handmatig de volgorde van items in een leesstroomcontainer overschrijven. Om deze eigenschap in een raster-, flex- of blokcontainer te gebruiken, stelt u de waarde voor reading-flow op de container in source-order en stelt u de reading-order van het individuele item in op een geheel getal.

Voor meer informatie, lees: Gebruik CSS reading-flow voor logische sequentiële focusnavigatie .

CSS if() -functie

De CSS if() functie biedt een beknopte manier om voorwaardelijke waarden uit te drukken. Deze functie accepteert een reeks voorwaarde-waardeparen, gescheiden door puntkomma's. De functie evalueert elke voorwaarde sequentieel en retourneert de waarde die is gekoppeld aan de eerste ware voorwaarde. Als geen van de voorwaarden als waar wordt geëvalueerd, retourneert de functie een lege tokenstream.

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-integratie (JSPI)

JavaScript Promise Integration (JSPI) is een API waarmee WebAssembly-applicaties kunnen worden geïntegreerd met JavaScript Promises.

Hiermee kan een WebAssembly-programma fungeren als generator van een belofte, en kan het WebAssembly-programma communiceren met API's die beloften bevatten.

Wanneer een toepassing JSPI gebruikt om een ​​promise-bearing (JavaScript) API aan te roepen, wordt de WebAssembly-code onderbroken en krijgt de oorspronkelijke aanroeper van het WebAssembly-programma een promise die wordt uitgevoerd wanneer het WebAssembly-programma uiteindelijk wordt voltooid.

En nog veel meer!

Er is natuurlijk nog veel meer:

  • Als voortzetting van opslagpartitionering heeft Chrome partitionering van Blob-URL-toegang geïmplementeerd op basis van opslagsleutel.
  • Canvas floating point pixelformaten zijn nu geïmplementeerd.
  • offset-path: shape() wordt ondersteund, zodat u responsieve vormen kunt gebruiken om het animatiepad in te stellen.

Verder lezen

Dit zijn slechts enkele belangrijke hoogtepunten. Bekijk de volgende links voor aanvullende wijzigingen in Chrome 137.

Abonneren

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

Zodra Chrome 138 uitkomt, laten we u weten wat er nieuw is in Chrome!

,

Rachel Andrew

Gepubliceerd: 27 mei 2025

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

Hoogtepunten uit deze release:

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

CSS reading-flow en reading-order

De CSS-eigenschap ' reading-flow bepaalt de volgorde waarin elementen in een flex-, raster- of bloklay-out worden weergegeven aan toegankelijkheidstools en hoe ze worden gefocust met behulp van lineaire sequentiële navigatiemethoden. Dit lost een al lang bestaand probleem met raster- en flexlay-outs op, waarbij de tabvolgorde los kan raken van de volgorde waarin de items worden weergegeven.

Het accepteert één sleutelwoordwaarde, met als standaardwaarde normal , waardoor elementen in DOM-volgorde blijven. 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 grid-order .

Met de CSS-eigenschap ' reading-order kunt u handmatig de volgorde van items in een leesstroomcontainer overschrijven. Om deze eigenschap in een raster-, flex- of blokcontainer te gebruiken, stelt u de waarde voor reading-flow op de container in source-order en stelt u de reading-order van het individuele item in op een geheel getal.

Voor meer informatie, lees: Gebruik CSS reading-flow voor logische sequentiële focusnavigatie .

CSS if() -functie

De CSS if() functie biedt een beknopte manier om voorwaardelijke waarden uit te drukken. Deze functie accepteert een reeks voorwaarde-waardeparen, gescheiden door puntkomma's. De functie evalueert elke voorwaarde sequentieel en retourneert de waarde die is gekoppeld aan de eerste ware voorwaarde. Als geen van de voorwaarden als waar wordt geëvalueerd, retourneert de functie een lege tokenstream.

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-integratie (JSPI)

JavaScript Promise Integration (JSPI) is een API waarmee WebAssembly-applicaties kunnen worden geïntegreerd met JavaScript Promises.

Hiermee kan een WebAssembly-programma fungeren als generator van een belofte, en kan het WebAssembly-programma communiceren met API's die beloften bevatten.

Wanneer een toepassing JSPI gebruikt om een ​​promise-bearing (JavaScript) API aan te roepen, wordt de WebAssembly-code onderbroken en krijgt de oorspronkelijke aanroeper van het WebAssembly-programma een promise die wordt uitgevoerd wanneer het WebAssembly-programma uiteindelijk wordt voltooid.

En nog veel meer!

Er is natuurlijk nog veel meer:

  • Als voortzetting van opslagpartitionering heeft Chrome partitionering van Blob-URL-toegang geïmplementeerd op basis van opslagsleutel.
  • Canvas floating point pixelformaten zijn nu geïmplementeerd.
  • offset-path: shape() wordt ondersteund, zodat u responsieve vormen kunt gebruiken om het animatiepad in te stellen.

Verder lezen

Dit zijn slechts enkele belangrijke hoogtepunten. Bekijk de volgende links voor aanvullende wijzigingen in Chrome 137.

Abonneren

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

Zodra Chrome 138 uitkomt, laten we u weten wat er nieuw is in Chrome!