Novità di Chrome 69

Pete LePage

Sono passati dieci anni dal primo rilascio di Chrome. Da allora molto è cambiato, 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 eleganti.
  • I ritagli dello schermo ti consentono di utilizzare l'intera area dello schermo, incluso lo spazio dietro il ritaglio dello schermo, a volte chiamato notch.
  • L'API Web Locks ti consente di acquisire in modo asincrono un blocco, mantenerlo finché il lavoro non viene eseguito e poi rilasciarlo.

E c'è molto altro.

Sono Pete LePage. Diamo un'occhiata alle novità per gli sviluppatori in Chrome 69.

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

Snap scorrimento CSS

Visualizza la demo | Codice sorgente

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

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


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

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

Lo snap scorrimento CSS funziona bene anche quando i target di snap hanno dimensioni diverse o sono più grandi dello scorrevole. Dai un'occhiata al post Scorrimento ben controllato con CSS Scroll Snap per ulteriori dettagli e esempi che puoi provare.

Ritagli del display (noti anche come tacche)

cellulare con il ritagliatore del display
I browser aggiungono un margine extra su un dispositivo mobile con il ritaglio del display per impedire che i contenuti vengano coperti dal ritaglio.

Un numero crescente di dispositivi mobili viene rilasciato con un ritaglio del display, a volte chiamato notch. Per risolvere questo problema, i browser aggiungono un po' di margine extra alla pagina in modo che i contenuti non vengano oscurati dalla tacca.

E se volessi utilizzare quello spazio?

Ora puoi farlo con le variabili d'ambiente CSS e il tag meta viewport-fit. 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 il layout dei tuoi contenuti.

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

Sul blog WebKit è disponibile un ottimo post sulla progettazione di siti web per iPhone X oppure puoi consultare la spiegazione per ulteriori dettagli.

API Web Locks

L'API Web Locks consente di acquisire un blocco in modo asincrono, mantenerlo finché il lavoro non viene eseguito e poi 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 verrà concessa e verrà eseguita.

MDN offre un ottimo panoramica dei blocchi web e include una spiegazione più approfondita e molti esempi. In alternativa, approfondisci la questione e consulta le specifiche.

E tanto altro.

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

sfumatura conica

  • Dalla specifica CSS4, ora puoi creare transizioni di colore attorno alla circumferenza di un cerchio utilizzando gradienti conici. Lea Verou ha creato un polyfill CSS conic-gradient() che puoi utilizzare e la pagina include un sacco di esempi davvero interessanti inviati dalla community.
  • Esiste un nuovo metodo toggleAttribute() per gli elementi che attiva/disattiva l'esistenza di un attributo, simile a classList.toggle().
  • Gli array JavaScript avranno due nuovi metodi: flat() e flatMap(). Restituisce un nuovo array con tutti gli elementi degli array secondari.
  • Inoltre, 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. Ognuno di loro è fantastico.

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 scoprire quanto è cresciuta la sezione Novità di Chrome dalla prima puntata? Dai un'occhiata a 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 il video e per aver fornito commenti e feedback. Li leggo tutti e prendo molto sul serio i tuoi suggerimenti. Questi video sono migliorati grazie a te.

Grazie per averci seguito!

Novità in Chrome: bloopers

Abbiamo realizzato un piccolo e divertente video con gli errori che abbiamo commesso durante le riprese. Dopo averlo guardato, ho imparato alcune cose:

  • Quando faccio dei lapsus, emetto dei suoni strani.
  • Faccio facce buffe e tiro fuori la lingua.
  • Mi muovo molto.

Iscriviti

Se vuoi rimanere al passo con i nostri video, iscriviti al nostro canale YouTube per sviluppatori di Chrome e riceverai una notifica via email ogni volta che lanceremo un nuovo video.

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