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.

Nella versione 69 di Chrome abbiamo aggiunto il supporto per:

  • CSS Scroll Snap ti consente di creare esperienze di scorrimento fluide e eleganti.
  • Ritagli del display ti consente di utilizzare l'intera area dello schermo, incluso l'eventuale spazio dietro il ritaglio del display, a volte chiamato "tacca".
  • 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 codice sorgente Chromium.

Snap scorrimento CSS

Visualizza demo | Fonte

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 opzione è 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;
}

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

Ritagli di visualizzazione (noti anche come tacche)

cellulare con il ritaglio del display
I browser aggiungono un margine in più sui dispositivi mobili con ritaglio display per evitare che i contenuti siano coperti dal ritaglio.

Un numero crescente di dispositivi mobili viene rilasciato con un ritaglio display, a volte chiamato "tacca". 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 di WebKit c'è un bellissimo post sulla progettazione di siti web per iPhone X oppure puoi consultare la spiegazione per maggiori 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 è mantenuto, 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 per acquisire la serratura 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

  • Dalle specifiche CSS4, ora puoi creare transizioni di colore intorno alla circonferenza di un cerchio utilizzando i 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 stanno ricevendo due nuovi metodi: flat() e flatMap(). Restituisce un nuovo array con tutti gli elementi degli array secondari.
  • OffscreenCanvas sposta il lavoro dal thread principale in 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 a realizzare i 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 ho letti tutti e tengo a cuore i tuoi suggerimenti. Questi video sono migliorati grazie a te.

Grazie per averci seguito!

Novità in Chrome: bloopers

Abbiamo raccolto un simpatico video di blooper che potrai divertirti! Dopo averlo guardato, ho imparato alcune cose:

  • Quando inciampo nelle mie parole, faccio rumori 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.

Mi chiamo Pete LePage e non appena verrà rilasciato Chrome 70 sarò qui per comunicarti le novità di Chrome.