Novità di Chrome 137

Rachel Andrew

Data di pubblicazione: 27 maggio 2025

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

Punti salienti di questa release:

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

CSS reading-flow e reading-order

La proprietà CSS reading-flow controlla l'ordine in cui gli elementi in un layout flessibile, a griglia o a blocchi vengono esposti agli strumenti di accessibilità e il modo in cui vengono selezionati utilizzando metodi di navigazione sequenziale lineare. In questo modo si risolve un problema di lunga data con i layout a griglia e flessibili, in cui l'ordine di tabulazione può essere disconnesso 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 a 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 a griglia, flessibile o a blocchi, imposta il valore reading-flow del contenitore su source-order e il valore reading-order del singolo elemento su un numero intero.

Per saperne di più, leggi Utilizzare CSS reading-flow per la navigazione sequenziale logica con messa a fuoco.

Funzione CSS if()

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 true. Se nessuna delle condizioni restituisce il valore true, la funzione restituisce un flusso 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 delle promesse JavaScript (JSPI) di WebAssembly

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

Consente a un programma WebAssembly di fungere da generatore di una promessa e di interagire con le API che supportano le promesse.

In particolare, quando un'applicazione utilizza JSPI per chiamare un'API (JavaScript) che contiene una promessa, il codice WebAssembly viene sospeso e al chiamante originale del programma WebAssembly viene fornita una promessa che verrà soddisfatta al termine del programma WebAssembly.

E tanto altro.

Ovviamente, c'è molto altro:

  • In continuità con il partizionamento dello spazio di archiviazione, Chrome ha implementato il partizionamento dell'accesso agli URL blob in base alla chiave di archiviazione.
  • Ora sono implementati i formati pixel in virgola mobile di Canvas.
  • offset-path: shape() è supportato, quindi puoi utilizzare forme adattabili per impostare il percorso dell'animazione.

Per approfondire

Questi sono solo alcuni dei punti salienti. Consulta i seguenti link per ulteriori modifiche in Chrome 137.

Iscriviti

Per rimanere aggiornato, iscriviti al canale YouTube Chrome Developers e riceverai una notifica via email ogni volta che pubblichiamo un nuovo video. Oppure seguici su X o LinkedIn per nuovi articoli e post del blog.

Non appena verrà rilasciato Chrome 138, ti informeremo sulle novità di Chrome.