Novità di Chrome 62

Pete LePage

E c'è molto altro ancora.

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

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

Indicatore di qualità della rete

L'API Network Information è disponibile in Chrome da un po' di tempo, ma fornisce solo velocità di rete teoriche in base alla connessione dell'utente. Immagina di utilizzare una rete Wi-Fi e di connetterti a un hotspot cellulare che supporta solo il 2G. L'API segnalerebbe Wi-Fi!

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

In Chrome 62, l'API è stata ampliata per fornire metriche effettive delle prestazioni di rete dal client. Con questi indicatori di qualità della rete, puoi adattare i contenuti alla rete. Ad esempio, con connessioni molto lente, potresti migliorare le prestazioni di caricamento pagina pubblicando una versione ridotta.

Per semplificare la logica dell'applicazione, l'API restituisce le prestazioni di rete misurate in termini di confronto con una connessione cellulare. Ad esempio, se l'API era connessa a una connessione in fibra super veloce, l'API riporterà 4G.

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

Questi indicatori saranno disponibili anche come intestazioni delle richieste HTTP e abilitati tramite i client hint. Dai un'occhiata al campione e dai un'occhiata alle spec per un approfondimento.

Caratteri variabili OpenType

Tradizionalmente, un carattere conteneva una sola istanza di una famiglia di caratteri, ad esempio uno spessore o un tratto. Se vuoi utilizzare formati regolari, grassetto e corsivo, devi includere tre caratteri distinti per aumentare lo spessore della pagina.

Un carattere variabile OpenType è l'equivalente di più caratteri singoli che possono essere pacchettizzati in modo compatto in un unico file di caratteri. Modificando la proprietà CSS font-variation-settings, sono facilmente regolabili l'estensione, lo stile, il peso e molto altro, offrendo un numero infinito di variazioni stilistiche. Ora puoi combinare questi tre caratteri 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 variabili OpenType rappresentano un nuovo e potente strumento per creare una tipografia reattiva e ridurre il peso delle pagine. Per ulteriori dettagli, consulta Introduzione ai caratteri variabili OpenType di John Hudson.

Acquisizione di contenuti multimediali da elementi DOM

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

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

Etichette non sicure 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 di Chrome 62 per gli sviluppatori. Ovviamente, ce ne sono molte altre.

Poi iscriviti al nostro canale YouTube. Riceverai una notifica via email ogni volta che verrà lanciato un nuovo video.

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