Novità di Chrome 69

Pete LePage

Sono trascorsi dieci anni dal primo rilascio di Chrome. Molte cose sono cambiate da allora, ma il nostro obiettivo di costruire una solida base per le moderne applicazioni web non è più così.

In Chrome 69 abbiamo aggiunto il supporto di:

  • Snaps di scorrimento CSS consente di creare esperienze di scorrimento fluide e fluide.
  • Ritagli display ti consente di utilizzare l'intera area dello schermo, incluso qualsiasi spazio dietro il ritaglio del display, a volte chiamato intaglio.
  • L'API Web Locks ti consente di acquisire un blocco in modo asincrono, bloccarlo durante l'esecuzione del lavoro e poi rilasciarlo.

E c'è molto altro ancora.

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

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

Snap di scorrimento CSS

Visualizza demo | Fonte

CSS Scorrimento Snap consente di creare esperienze di scorrimento fluide, fluide, dichiarando posizioni di scorrimento scorrimento 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, devo aggiungere 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 far scorrere facilmente fino alla posizione perfetta.


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

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

L'agganciamento tramite scorrimento CSS funziona bene, anche quando i target dell'agganciamento hanno dimensioni diverse o sono più grandi dello scorrimento. Dai un'occhiata al post Well-Controlled Scrolling with CSS Scroll Snap per ulteriori dettagli ed esempi da provare.

Ritagli del display (noti anche come tacche)

telefono cellulare con ritaglio sul display
I browser aggiungono un margine aggiuntivo sui dispositivi mobili con un ritaglio del display per evitare che i contenuti vengano coperti da questo ritaglio.

Stiamo lanciando un numero crescente di dispositivi mobili con un ritaglio display, a volte chiamato tacca. Per far fronte a questo problema, i browser aggiungono un po' di margine in più alla pagina in modo che i contenuti non siano oscurati dall'incavo.

E se volessi usare quello spazio?

Ora puoi farlo con le variabili di ambiente CSS e il meta tag viewport-fit. Ad esempio, per indicare al browser di espandersi nell'area di ritaglio dello schermo, imposta la proprietà viewport-fit nel meta tag viewport su cover.

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

Puoi quindi utilizzare le safe-area-inset-* variabili di ambiente CSS per definire 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 dedicato alla progettazione di siti web per iPhone X oppure leggi l'esplicativo per ulteriori dettagli.

API Web Locks

L'API Web Locks ti consente di acquisire un blocco in modo asincrono, bloccarlo durante l'esecuzione del lavoro e poi rilasciarlo. Mentre il blocco viene 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 garantire che venga sincronizzata una sola scheda 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.
});

Nella prima scheda per acquisire il blocco i dati verranno sincronizzati con la rete. Se un'altra scheda tenta di acquisire lo stesso blocco, verrà messa in coda. Una volta rilasciato il blocco, alla successiva richiesta in coda verrà concesso il blocco, dopodiché verrà eseguita.

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

E tanto altro.

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

gradiente conico

  • Dalle specifiche CSS4 ora puoi creare transizioni di colore intorno alla circonferenza di un cerchio utilizzando gradienti conici. Lea Verou dispone di un polyfill conic-gradient() CSS che puoi usare e la pagina include una serie di campioni inviati dalla community davvero interessanti.
  • È disponibile un nuovo metodo toggleAttribute() per gli elementi che attiva/disattiva l'esistenza di un attributo, simile a classList.toggle().
  • Gli array JavaScript verranno introdotti da due nuovi metodi: flat() e flatMap(). Restituiscono un nuovo array in cui tutti gli elementi dell'array secondario sono stati spostati al suo interno.
  • Inoltre, OffscreenCanvas sposta il lavoro dal thread principale al 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 scoprire quanto è arrivata la novità di Chrome dopo il nostro primo episodio? Guarda questo divertente video sui progressi di 30 secondi che ripercorre la nostra storia, dal primo video a oggi.

E ovviamente voi per aver guardato il video e per aver fornito i tuoi commenti e feedback. Li leggo tutti e prendo incontro i tuoi suggerimenti. Questi video sono migliorati grazie a te.

Grazie per l'attenzione.

Novità di Chrome Bloopers

Abbiamo messo insieme una simpatica raccolta di gaffe che potrai farvi apprezzare. Dopo averlo guardato, ho imparato alcune cose:

  • Quando incito sulle mie parole, faccio alcuni rumori strani.
  • Faccio delle facce e faccio una linguaccia.
  • Mi muovono molto.

Iscriviti

Se vuoi tenerti sempre al corrente sui nostri video, iscriviti al nostro canale YouTube degli sviluppatori di Chrome e riceverai una notifica via email ogni volta che viene lanciato un nuovo video.

Mi chiamo Pete LePage e sarò qui per dirti le novità di Chrome non appena uscirà la versione 70.