Novità di Chrome 123

Adriana Jara

Tieni presente quanto segue:

Sono Adriana Jara. Analizziamo le novità di Chrome 123 per gli sviluppatori.

light-dark() Funzione CSS.

La funzione light-dark() in CSS ti consente di creare colori che si adattano alle preferenze dell'utente per la modalità Luce o Buio. Utilizza la funzione light-dark() per specificare due diversi valori di colore all'interno di un'unica proprietà CSS.

Il browser sceglierà automaticamente il colore appropriato in base al valore calcolato dell'elemento color-scheme. 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 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 errore INP (Interaction to Next Paint), un Segnale web essenziale che misura la reattività di un sito web.

La nuova API è una versione migliorata dell'API Long Tasks, che consente di comprendere meglio gli 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 lunga esecuzione, tempo di rendering e tempo speso in layout e stile forzati, noti come thrashing del layout.

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

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

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

API Service worker Static Routing.

Utilizzando i service worker è possibile far funzionare i siti web offline e creare strategie di memorizzazione nella cache che possono migliorare le prestazioni.

Tuttavia, possono verificarsi dei costi legati alle prestazioni quando una pagina viene caricata per la prima volta dopo un po' 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 in modo che siano sempre forniti dalla rete. Quando in un secondo momento un URL controllato viene caricato, il browser può iniziare a recuperare le risorse da quei percorsi prima che il service worker abbia terminato l'avvio. In questo modo il service worker viene rimosso dagli URL che, a tuo giudizio, non sono necessari.

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

E tanto altro.

Ovviamente c'è molto altro.

  • Con l'interfaccia NavigationActivation puoi offrire pagine personalizzate in base alla navigazione dell'utente.

  • Chrome ora supporta Zstandard (zstd). Questa metrica Content-Encoding consente di caricare le pagine più velocemente, utilizzare meno larghezza di banda, impiegare meno tempo, CPU e durata della compressione dei server, con conseguente riduzione dei costi del server.

  • L'API notRestoredReasons per bfcache è in fase di implementazione da Chrome 123. In questo modo i proprietari dei siti possono raccogliere nel campo i motivi per cui non è stato possibile utilizzare bfcache. I proprietari dei siti possono utilizzarla per migliorare l'utilizzo della cache back-forward che consente una navigazione più veloce 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 visualizzata 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 trattati solo alcuni punti salienti. Controlla i seguenti link per ulteriori modifiche in Chrome 123.

Abbonati

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

Adriana Jara e non appena verrà rilasciata la versione 124 di Chrome, sarò felice di presentarti le novità di Chrome.