Questa pagina è stata tradotta dall'API Cloud Translation.

Novità di Chrome 123

Adriana Jara

Tieni presente quanto segue:

Adatta la combinazione di colori con la nuova funzione light-dark().
Diagnostica la reattività del tuo sito con l'API Long Animation Frames.
Evita le penalizzazioni del rendimento all'avvio dei service worker con l'API di routing statico dei service worker.
E c'è molto altro.

Sono Adriana Jara. Diamo un'occhiata alle novità per gli sviluppatori in Chrome 123.

Funzione CSS `light-dark()`.

La funzione light-dark() in CSS ti consente di creare colori che si adattano alla preferenza di un utente per la modalità chiara o scura. Utilizza la funzione light-dark() per specificare due diversi valori di colore all'interno di una singola proprietà CSS.

Il browser sceglierà automaticamente il colore appropriato in base al valore color-scheme calcolato dell'elemento. Ad esempio, con il seguente CSS:

html {
  color-scheme: light dark;
}
.target {
    background-color: light-dark(lime, green);
}

Se l'utente ha selezionato un tema chiaro, l'elemento avrà uno sfondo verde lime.
Se l'utente ha selezionato un tema scuro, l'elemento avrà uno sfondo verde.

API Long Animation Frames.

L'API Long Animation Frames è disponibile per aiutarti a trovare le cause della congestione del thread principale, che spesso è la causa di un cattivo INP (Interaction to Next Paint), un Core Web Vital che misura l'adattabilità di un sito web.

La nuova API è una versione avanzata dell'API Long Tasks, che offre una migliore comprensione degli aggiornamenti lenti dell'interfaccia utente. L'API Long Animation Frames ti consente di misurare il lavoro di blocco. Misura le attività insieme al seguente aggiornamento del rendering e aggiunge informazioni come script a esecuzione prolungata, tempo di rendering e tempo trascorso in layout e stile forzati, noto come thrashing del layout.

La raccolta e l'analisi di queste informazioni ti consentono di identificare e risolvere i colli di bottiglia delle prestazioni. Puoi acquisire frame lunghi con il codice riportato di seguito.

const observer = new PerformanceObserver((list) => {
  console.log(list.getEntries());
});

observer.observe({ type: 'long-animation-frame', buffered: true });

API Static Routing per i service worker.

Con i worker di servizio puoi far funzionare i siti web offline e creare strategie di memorizzazione nella cache che possono migliorare le prestazioni.

Tuttavia, può essere previsto un costo in termini di prestazioni quando una pagina viene caricata per la prima volta dopo un certo periodo di tempo e il service worker di controllo non è in esecuzione in quel momento. Poiché tutti i recuperi devono avvenire tramite il service worker, il browser deve attendere l'avvio e l'esecuzione del service worker per sapere quali contenuti caricare.

Con l'API Service Worker Static Routing, al momento dell'installazione puoi dichiarare i percorsi da servire sempre dalla rete. Quando un URL controllato viene caricato in un secondo momento, il browser può iniziare a recuperare le risorse da questi percorsi prima del completamento dell'avvio del service worker. In questo modo, il service worker viene rimosso dagli URL che sai non richiedono un service worker.

addEventListener('install', (event) => {
  event.addRoutes({
    condition: {
          urlPattern: "/articles/*",
          runningStatus: "running"
    },
    source: "fetch-event"
  });
});

E tanto altro.

Ovviamente ce ne sono molti altri.

Puoi offrire pagine personalizzate in base alla pagina da cui l'utente ha eseguito la navigazione con l'interfaccia NavigationActivation.
Chrome ora supporta Zstandard (zstd). Questo Content-Encoding consente di caricare le pagine più velocemente, utilizzare meno larghezza di banda e risparmiare tempo, CPU ed energia per la compressione sui server, con una conseguente riduzione dei costi dei server.
L'API notRestoredReasons per la cache bfcache è in fase di implementazione a partire da Chrome 123. In questo modo i proprietari dei siti possono raccogliere sul campo i motivi per cui non è stato possibile utilizzare bfcache. I proprietari di siti possono utilizzarlo per migliorare l'utilizzo della cache bfcache, che consente una navigazione più rapida nella cronologia.
Il valore picture-in-picture per display-mode ti consente di scrivere regole CSS specifiche che si applicano solo quando l'app web viene mostrata in modalità Picture in picture. Ad esempio:

@media all and (display-mode: picture-in-picture) {
  body {
    margin: 0;
  }
  h1 {
    font-size: 0.8em;
  }
}

Per approfondire

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

Per rimanere al passo con le novità, iscriviti al canale YouTube di Chrome for Developers, e riceverai una notifica via email ogni volta che lanceremo un nuovo video.

Ciao Adriana Jara, non appena verrà rilasciato Chrome 124 ti fornirò tutte le informazioni sulle novità di Chrome.