Novità di Chrome 137

Rachel Andrew

Pubblicato: 27 maggio 2025

Chrome 137 è in fase di implementazione e questo post illustra alcune delle funzionalità principali della release. Leggi le note di rilascio complete di Chrome 137.

Novità di questa release:

Utilizza reading-flow e reading-order per garantire un ordine logico delle schede in layout complessi. La funzione if() CSS fornisce un modo conciso per esprimere valori condizionali. L'integrazione delle promesse JavaScript (JSPI) consente alle applicazioni WebAssembly di integrarsi con le promesse JavaScript.

reading-flow e reading-order CSS

La proprietà CSS reading-flow controlla l'ordine in cui gli elementi in un layout flex, grid o a blocchi vengono esposti agli strumenti di accessibilità e la modalità di messa a fuoco utilizzando metodi di navigazione sequenziale lineari. In questo modo viene risolto un problema di lunga data con i layout di tipo griglia e flessibile, in cui l'ordine delle schede può essere scollegato dall'ordine in cui sono disposti gli elementi.

Accetta un valore di parola chiave, con un valore predefinito di normal, che mantiene il comportamento di ordinamento degli elementi nell'ordine DOM. Per utilizzarlo all'interno di un contenitore flessibile, imposta il valore su flex-visual o flex-flow. Per utilizzarlo all'interno di un contenitore della griglia, imposta il valore su grid-rows, grid-columns o grid-order.

La proprietà CSS reading-order ti consente di eseguire manualmente l'override dell'ordine degli elementi all'interno di un contenitore del flusso di lettura. Per utilizzare questa proprietà all'interno di un contenitore di tipo grid, flex o block, imposta il valore reading-flow del contenitore su source-order e imposta reading-order del singolo elemento su un valore intero.

Per scoprire di più, consulta Utilizzare CSS reading-flow per la navigazione con il fuoco sequenziale logico.

Funzione if() CSS

La funzione CSS if() fornisce un modo conciso per esprimere valori condizionali. Accetta una serie di coppie condizione-valore delimitate da punto e virgola. La funzione valuta ogni condizione in sequenza e restituisce il valore associato alla prima condizione vera. Se nessuna delle condizioni restituisce true, la funzione restituisce uno stream di token vuoto.

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>

Integrazione di promesse JavaScript WebAssembly (JSPI)

JSPI (JavaScript Promise Integration) è un'API che consente alle applicazioni WebAssembly di integrarsi con le promesse JavaScript.

Consente a un programma WebAssembly di agire come generatore di una promessa e consente al programma WebAssembly di interagire con API che generano promesse.

In particolare, quando un'applicazione utilizza JSPI per chiamare un'API (JavaScript) con promesse, il codice WebAssembly viene sospeso e all'autore della chiamata originale al programma WebAssembly viene assegnata una promessa che verrà soddisfatta al termine del programma WebAssembly.

E tanto altro.

Ovviamente, ce ne sono molti altri:

  • Come continuazione del partizionamento dello spazio di archiviazione, Chrome ha implementato il partizionamento dell'accesso all'URL del blob in base alla chiave dello spazio di archiviazione.
  • I formati dei pixel in virgola mobile di Canvas sono ora implementati.
  • offset-path: shape() è supportato, quindi puoi utilizzare forme adattabili per impostare il percorso di animazione.

Per approfondire

Sono riportati solo alcuni punti salienti. Consulta i seguenti link per ulteriori modifiche in Chrome 137.

Iscriviti

Per non perderti nessuna novità, iscriviti al canale YouTube di Chrome for Developers e riceverai una notifica via email ogni volta che lanceremo un nuovo video. In alternativa, seguici su X o su LinkedIn per ricevere nuovi articoli e post del blog.

Non appena verrà rilasciato Chrome 138, ti comunicheremo le novità di Chrome.