Novità di Chrome 62

Pete LePage

E c'è molto altro.

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

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

Indicatore di qualità della rete

L'API Network Information è stata disponibile in Chrome da un po' di tempo, ma fornisce solo velocità di rete teoretiche in base alla connessione dell'utente. Immagina di utilizzare il Wi-Fi, ma di essere connesso a un hotspot cellulare con velocità solo 2G. L'API segnalerebbe il Wi-Fi.

console.log(navigator.connection.type);
> wifi

In Chrome 62, l'API è stata ampliata per fornire metriche effettive sul rendimento della rete dal client. Utilizzando questi indicatori della qualità della rete, puoi personalizzare i contenuti in base alla rete. Ad esempio, su connessioni molto lente, puoi migliorare le prestazioni di caricamento della pagina pubblicando una versione ridotta.

Per semplificare la logica dell'applicazione, l'API restituisce il rendimento della rete misurato in termini di confronto con una connessione di rete mobile. Ad esempio, se è collegata a una connessione in fibra super veloce, l'API segnalerà 4G.

console.log(navigator.connection.effectiveType);
> 4G

Questi indicatori saranno disponibili anche come intestazioni delle richieste HTTP e verranno attivati tramite Client Hints. Per approfondire, consulta il sample e le specifiche.

Caratteri OpenType variabili

Tradizionalmente, un carattere conteneva una sola istanza di una famiglia di caratteri, ad esempio un'unica dimensione o un'unica larghezza. Se volessi caratteri normali, in grassetto e in corsivo, dovresti includere tre caratteri separati, aumentando il peso della pagina.

Un carattere OpenType variabile è l'equivalente di più caratteri singoli che possono essere pacchettizzati in modo compatto in un unico file del carattere. Regolando la proprietà CSS font-variation-settings è possibile modificare facilmente allungamento, stile, spessore e altro ancora, offrendo un numero infinito di varianti stilistiche. Ora questi tre caratteri possono essere combinati in un unico file compatto.

.heading {
  font-family: "Avenir Next Variable";
  font-size: 48px;
  font-variation-settings: 'wght' 700, 'wdth' 75;
}
.content {
  font-family: "Avenir Next Variable";
  font-size: 24px;
  font-variation-settings: 'wght' 400;
}

I caratteri OpenType variabili ci offrono un nuovo strumento potente per creare una tipografia adattabile e ridurre il peso della pagina. Per ulteriori dettagli, consulta Introduzione ai caratteri OpenType variabili di John Hudson.

Acquisizione di contenuti multimediali da elementi DOM

Ora puoi acquisire in tempo reale contenuti in un MediaStream direttamente da HTMLMediaElements, come audio e video, con l'API Media Capture from DOM Elements.

Dopo aver invocato captureStream() su un elemento multimediale HTML, i contenuti in streaming possono essere manipolati, elaborati, inviati da remoto o registrati. Immagina di usare l'audio web per creare il tuo equalizzatore o vocoder. In alternativa, puoi trasmettere i contenuti su un sito remoto utilizzando WebRTC. Le possibilità sono quasi infinite.

Etichette Non sicura per alcune pagine HTTP

Come annunciato in precedenza, a partire da Chrome 62, quando un utente inserisce dati in una pagina HTTP, Chrome contrassegnerà la pagina come "Non sicura" con un'etichetta nella barra degli indirizzi. Questa etichetta verrà mostrata anche in modalità di navigazione in incognito per tutte le pagine HTTP.

E tanto altro.

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

Poi iscriviti al nostro canale YouTube e riceverai una notifica via email ogni volta che lanceremo un nuovo video.

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