Novità di Chrome 129

Pete LePage

Tieni presente quanto segue:

Sono Pete LePage. Vediamo le novità per gli sviluppatori in Chrome 129.

Suddividi le attività lunghe con scheduler.yield()

Le attività lunghe ritardano la capacità del browser di rispondere all'input dell'utente, creando la percezione che un sito sia lento e influendo su metriche di prestazioni critiche come l'INP. Con scheduler.yield(), puoi suddividere le attività lunghe in blocchi più piccoli, migliorando la reattività cedendo esplicitamente il controllo al thread principale.

Ti consente di indicare al browser:

"EHI! Il lavoro che sto per svolgere potrebbe richiedere un po' di tempo. Se devi dipingere un fotogramma, rispondere all'input dell'utente o svolgere altre attività importanti, va bene, posso aspettare."

Una rappresentazione di come suddividere un'attività può facilitare l'interazione con l'utente. In alto, un'attività lunga impedisce l'esecuzione di un gestore eventi fino al termine dell'attività. Nella parte inferiore, l'attività divisa in blocchi consente al gestore di eventi di essere eseguito prima del previsto.

Aggiungi spesso la seguente riga al codice JavaScript per lasciare spazio al browser ed evitare problemi INP.

await scheduler.yield();

È importante sottolineare che consente di dare la priorità alla continuazione del codice, in modo da non perdere nulla cedendo il controllo. Consigliamo di utilizzare liberamente scheduler.yield() nelle funzioni tra blocchi di lavoro più grandi.

Per ulteriori dettagli, consulta la sezione Ottimizzare le attività lunghe.

Animazioni con dimensioni intrinseche

Le animazioni CSS sono piuttosto interessanti, ma in genere richiedono dimensioni esplicite. Non è possibile utilizzare parole chiave intrinseche relative alle dimensioni, come auto, min-content o fit-content.

La proprietà CSS interpolate-size apre un nuovo insieme di animazioni che non erano possibili utilizzando parole chiave per le dimensioni intrinsiche.

Senza interpolate-size, i pulsanti nel seguente video non presentano transizioni.

Dopo aver aggiunto interpolate-size: allow-keywords, i pulsanti nel video avranno un bellissimo effetto di animazione di transizione.

Se specifichi interpolate-size: allow-keywords nell'elemento root, il nuovo comportamento viene impostato per l'intera pagina. Ti consigliamo di farlo ogni volta che la compatibilità non è un problema.

:root {
  interpolate-size: allow-keywords;
}

.item {
  height: auto;

  @starting-style {
    height: 0;
  }
}

Per un controllo più preciso, la funzione CSS calc-size(), simile a calc(), supporta anche le operazioni su una sola delle parole chiave di dimensionamento intrinseco supportate. Quando esegui i calcoli del layout, la parola chiave size restituisce la dimensione originale di calc-size-basis.

nav a {
  width: 80px;
  overflow-x: clip;
  transition: width 0.35s ease;

  &:hover {
    width: calc-size(auto, size);
  }
}

Per informazioni complete, consulta Animazione a altezza: auto; (e altre parole chiave di dimensionamento intrinseco) in CSS.

Modifiche al posizionamento dell'ancora CSS

Il posizionamento dell'ancora CSS è stato implementato in Chrome 125, ma dopo alcune ulteriori discussioni all'interno del gruppo di lavoro CSS, sono state apportate alcune modifiche alle specifiche e all'implementazione. Se utilizzi già la posizione dell'ancora CSS, devi aggiornare il codice il prima possibile.

Innanzitutto, inset-area è stato rinominato in position-area. Questa scelta è stata preferita perché la formulazione position- ti aiuta a ricordare che questa proprietà viene applicata all'elemento posizionato, non all'elemento di ancoraggio.

In secondo luogo, position-try-options viene rinominato in position-try-fallbacks. Questo ti aiuta a ricordare che si tratta solo di valori di riserva per la posizione principale, che è determinata dagli stili di base.

Infine, la sintassi funzionale inset-area() verrà rimossa da position-try. Pertanto, utilizza position-try-fallbacks: top anziché position-try-fallbacks: inset-area(top).

E tanto altro.

Ovviamente ce ne sono molti altri.

Esiste un nuovo metodo Intl per la formattazione delle durate, con il supporto di più impostazioni internazionali.

const l = "fr-FR";
const d = {hours: 1, minutes: 46, seconds: 40};
const opts = {style: "long"};
new Intl.DurationFormat(l, opts).format(d);
// "1 heure, 46 minutes et 40 secondes"

Ora la tela GPU web può utilizzare l'intera gamma del display per le immagini HDR.

Inoltre, sono previste alcune ritiri e rimozioni che potrebbero interessare alcuni sviluppatori.

Leggi le note di rilascio complete.

Per approfondire

Vengono illustrati solo alcuni dei punti salienti. Controlla i seguenti link per ulteriori modifiche in Chrome 129.

Iscriviti

Per non perderti gli aggiornamenti, iscriviti al canale YouTube degli sviluppatori di Chrome: riceverai una notifica via email ogni volta che verrà lanciato un nuovo video.

Sono Pete LePage e sostituisco Adriana. Non appena verrà rilasciato Chrome 130, saremo qui per raccontarti le novità di Chrome.