Novità di Chrome 69

Pete LePage

Sono passati dieci anni dal primo rilascio di Chrome. Da allora sono cambiate molte cose, ma il nostro obiettivo di creare una base solida per le applicazioni web moderne è rimasto invariato.

In Chrome 69, abbiamo aggiunto il supporto per:

  • CSS Scroll Snap ti consente di creare esperienze di scorrimento fluide e veloci.
  • I ritagli del display ti consentono di utilizzare l'intera area dello schermo, incluso lo spazio dietro il ritaglio del display, a volte chiamato notch.
  • L'API Web Locks ti consente di acquisire in modo asincrono un blocco, mantenerlo durante l'esecuzione del lavoro e poi rilasciarlo.

E ci sono molte altre cose da scoprire.

Mi chiamo Pete LePage. Scopriamo le novità per gli sviluppatori di Chrome 69.

Vuoi l'elenco completo delle modifiche? Consulta l'elenco delle modifiche al repository di origine di Chromium.

CSS Scroll Snap

CSS Scroll Snap consente di creare esperienze di scorrimento fluide e veloci dichiarando posizioni di scorrimento istantaneo che indicano al browser dove fermarsi dopo ogni operazione di scorrimento. Questa funzionalità è molto utile per i caroselli di immagini o le sezioni impaginate in cui vuoi che l'utente scorra fino a un punto specifico.

Per un carosello di immagini, aggiungerei scroll-snap-type: x mandatory; al contenitore di scorrimento e scroll-snap-align: center; a ogni immagine. Poi, man mano che l'utente scorre il carosello, ogni immagine viene spostata nella posizione perfetta.


#gallery {
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  display: flex;
}

#gallery img {
   scroll-snap-align: center;
}

Lo scorrimento con snap CSS funziona bene anche quando le destinazioni dello snap hanno dimensioni diverse o quando sono più grandi dello scroller. Per ulteriori dettagli ed esempi da provare, consulta il post Well-Controlled Scrolling with CSS Scroll Snap.

Ritagli display (noti anche come tacche)

cellulare con ritaglio del display
I browser aggiungono un margine extra su un dispositivo mobile con intaglio del display per impedire che i contenuti vengano coperti dall'intaglio.

Viene rilasciato un numero crescente di dispositivi mobili con un'area di visualizzazione ritagliata, a volte chiamata notch. Per risolvere questo problema, i browser aggiungono un piccolo margine extra alla pagina in modo che i contenuti non vengano oscurati dalla tacca.

Ma cosa succede se vuoi utilizzare quello spazio?

Con le variabili d'ambiente CSS e il tag meta viewport-fit, ora puoi farlo. Ad esempio, per indicare al browser di espandersi nell'area di ritaglio del display, imposta la proprietà viewport-fit nel tag meta viewport su cover.

<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>

Puoi quindi utilizzare le safe-area-inset-* variabili d'ambiente CSS per disporre i contenuti.

.content {
  padding: 16px;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

Sul blog di WebKit è disponibile un ottimo post su Progettare siti web per iPhone X. Per ulteriori dettagli, consulta la spiegazione.

API Web Locks

L'API Web Locks ti consente di acquisire un blocco in modo asincrono, mantenerlo durante l'esecuzione del lavoro e rilasciarlo. Mentre il blocco è attivo, nessun altro script nell'origine può acquisire lo stesso blocco, contribuendo a coordinare l'utilizzo delle risorse condivise.

Ad esempio, se un'app web in esecuzione in più schede vuole assicurarsi che solo una scheda venga sincronizzata con la rete, il codice di sincronizzazione tenterà di acquisire un blocco denominato network_sync_lock.

navigator.locks.request('network_sync_lock', async lock => {
  // The lock has been acquired.
  await do_something();
  await do_something_else();
  // Now the lock will be released.
});

La prima scheda che acquisisce il blocco sincronizzerà i dati con la rete. Se un'altra scheda tenta di acquisire lo stesso blocco, verrà messa in coda. Una volta rilasciato il blocco, la richiesta successiva in coda riceverà il blocco e verrà eseguita.

MDN offre un'ottima introduzione a Web Locks e include una spiegazione più approfondita e molti esempi. In alternativa, approfondisci e consulta le specifiche.

E tanto altro.

Queste sono solo alcune delle modifiche apportate a Chrome 69 per gli sviluppatori, ma ce ne sono molte altre.

sfumatura conica

  • Dalla specifica CSS4, ora puoi creare transizioni di colore attorno alla circonferenza di un cerchio utilizzando sfumature coniche. Lea Verou ha un polyfill CSS conic-gradient() che puoi utilizzare e la pagina include un sacco di esempi davvero interessanti inviati dalla community.
  • È disponibile un nuovo metodo toggleAttribute() sugli elementi che attiva/disattiva l'esistenza di un attributo, in modo simile a classList.toggle().
  • Gli array JavaScript stanno ricevendo due nuovi metodi: flat() e flatMap(). Restituiscono un nuovo array con tutti gli elementi dei sottoarray compressi.
  • OffscreenCanvas sposta il lavoro dal thread principale a un worker, contribuendo a eliminare i colli di bottiglia delle prestazioni.

Easter egg

Hai trovato tutti gli easter egg nel video?

Un ringraziamento speciale a tutte le persone che hanno contribuito alla realizzazione dei 28 episodi di Novità di Chrome. Ognuna di queste persone è fantastica.

Heather Duthie<br>
Tim Malieckal<br>
Rick Murphy<br>
Derek Bass<br>
Kiran Puri<br>
Nilesh Bell-Gorsia<br>
Lee Carruthers

Philip Maniaci<br>
Chris Turiello<br>
Andrew Barker<br>
Alex Crowe<br>
Izzy Cosentino<br>
Norm Magnuson<br>
Loren Borja

Michelle Ortega<br>
Varun Bajaj<br>
Ted Maroney<br>
Andrew Bender<br>
Andrew Naugle<br>
Michelle Michelson<br>
Todd Rawiszer

Anthony Mcgowen<br>
Victoria Canty<br>
Alexander Koht<br>
Jarrod Kloiber<br>
Andre Szyszkowski<br>
Kelsey Allen<br>
Liam Spradlin

Vuoi vedere i progressi di Novità di Chrome dal nostro primo episodio? Guarda questo divertente video di progressione di 30 secondi che ripercorre la nostra storia dal primo video a oggi.

E, naturalmente, grazie a te per aver guardato i video e per i tuoi commenti e feedback. Li leggo tutti e prendo a cuore i vostri suggerimenti. Questi video sono migliorati grazie a te.

Grazie per averci seguito!

Novità di Chrome Bloopers

Abbiamo creato una piccola e divertente raccolta di errori per il tuo divertimento. Dopo averlo guardato, ho imparato alcune cose:

  • Quando mi impappino, faccio dei rumori strani.
  • Faccio le facce buffe e tiro fuori la lingua.
  • Mi muovo molto.

Iscriviti

Se vuoi rimanere al corrente dei nostri video, iscriviti al nostro canale YouTube Chrome Developers e riceverai una notifica via email ogni volta che pubblichiamo un nuovo video.

Sono Pete LePage e non appena verrà rilasciato Chrome 70, sarò qui per raccontarvi le novità di Chrome.