Novità di Chrome 129

Tieni presente quanto segue:

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

Suddividere 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 fondamentali 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! L'operazione che sto per eseguire potrebbe richiedere un po' di tempo. Se devi dipingere un frame, rispondere all'input dell'utente o hai altre attività importanti, non c'è problema, 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à. In basso, l'attività suddivisa in blocchi consente all'handler dell'evento di essere eseguito prima.

Aggiungi spesso la seguente riga al codice JavaScript per dare un po' di respiro al browser ed evitare problemi di 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 molto belle, ma in genere richiedono dimensioni esplicite, quindi non puoi utilizzare le parole chiave di dimensionamento intrinseco come auto, min-content o fit-content.

La proprietà CSS interpolate-size apre un nuovo insieme di animazioni che non erano possibili quando si utilizzavano le parole chiave di dimensionamento intrinseco.

Senza interpolate-size, i pulsanti nel video seguente non hanno transizione.

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

La specifica di interpolate-size: allow-keywords nell'elemento root imposta il nuovo comportamento per l'intera pagina. Ti consigliamo di farlo quando 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 le dimensioni originali 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 viene 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

Sono riportati solo alcuni punti salienti. Consulta i seguenti link per altre modifiche in Chrome 129.

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.

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