Novità di Chrome 71

In Chrome 71 abbiamo aggiunto il supporto di:

• La visualizzazione di tempi relativi ora fa parte dell'API Intl.
• Specificare su quale lato del testo deve essere visualizzata la sottolineatura per il testo che scorre verticalmente.
• Attivazione dell'utente prima di utilizzare l'API di sintesi vocale.

E c'è molto altro ancora.

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

Log delle modifiche

Questa sezione illustra solo alcuni dei punti salienti. Controlla i link di seguito per scoprire ulteriori modifiche in Chrome 71.

• Elenco delle modifiche al repository di origine di Chromium
• Aggiornamenti di ChromeStatus.com per Chrome 71
• Ritiri e rimozioni di Chrome 71

Mostra orari relativi con Intl.RelativeTimeFormat()

Molte app web usano frasi come "ieri", "tra due giorni" o "un'ora fa" per indicare quando è successo o sta per accadere qualcosa, invece di visualizzare la data e l'ora complete.

La visualizzazione di orari relativi è diventata così comune che la maggior parte delle librerie di data/ora comuni fornisce funzioni localizzate per gestire questo problema. Infatti, quasi tutte le app web che realizzo, Moment JS è una delle prime librerie che aggiungo, espressamente a questo scopo.

Chrome 71 introduce Intl.RelativeTimeFormat(), che sposta il lavoro sul motore JavaScript e consente la formattazione localizzata di tempi relativi. Questo ci consente di migliorare le prestazioni e significa che abbiamo bisogno di queste librerie come polyfill solo quando un browser non supporta ancora le nuove API.

const rtf = new Intl.RelativeTimeFormat('en');

rtf.format(3.14, 'second');
// → 'in 3.14 seconds'

rtf.format(-15, 'minute');
// → '15 minutes ago'

Usarlo è semplice: crea una nuova istanza e specifica le impostazioni internazionali, quindi chiama il formato con l'ora relativa. Per informazioni dettagliate, leggi il post di Intl.RelativeTimeFormat API di Mathias.

Specifica della posizione della sottolineatura per il testo verticale

Quando il testo cinese o giapponese viene visualizzato in un flusso verticale, i browser non sono coerenti con la posizione della sottolineatura, che potrebbe essere a sinistra o a destra.

In Chrome 71, la proprietà text-underline-position ora accetta left o right nell'ambito delle specifiche per la decorazione del testo CSS3. La specifica per la decorazione del testo CSS3 aggiunge diverse nuove proprietà che consentono di specificare, ad esempio, il tipo di riga da utilizzare, lo stile, il colore e la posizione.

.left {
  text-underline-position: left;
}

.right {
  text-underline-position: right;
}

La sintesi vocale richiede l'attivazione da parte dell'utente

Siamo rimasti tutti sorpresi quando abbiamo visitato un sito e all'improvviso abbiamo iniziato a parlare con noi. I criteri relativi alla riproduzione automatica impediscono ai siti di riprodurre automaticamente file audio o video con audio. Alcuni siti hanno cercato di aggirare questo problema utilizzando invece l'API di sintesi vocale.

A partire da Chrome 71, l'API di sintesi vocale richiede un qualche tipo di attivazione utente nella pagina prima di funzionare. Questo lo allinea con le altre norme di riproduzione automatica. Se provi a utilizzarla prima che l'utente abbia interagito con la pagina, verrà generato un errore.

const utterance = new window.SpeechSynthesisUtterance('Hello');
utterance.lang = lang || 'en-US';
try {
  window.speechSynthesis.speak(utterance);
} catch (ex) {
  console.log('speechSynthesis not available', ex);
}

Non c'è niente di peggio che visitare un sito per stupire te e i tuoi colleghi seduti intorno a te.

E tanto altro.

Queste sono solo alcune delle modifiche di Chrome 71 per gli sviluppatori. Ma ce n'è molto altro.

• Ora il metodo Element.requestFullscreen() può essere personalizzato su Android e ti consente di scegliere se rendere visibile la barra di navigazione o una modalità completamente immersiva in cui non vengono mostrati controlli dello user agent finché non viene eseguito un gesto dell'utente.
• La modalità predefinita delle credenziali per le richieste di script dei moduli è cambiata da omit a same-origin.
• E portando Chrome in linea con le specifiche Shadow DOM v1, Chrome 71 ora calcola la specificità delle pseudoclassi :host() e :host-context(), nonché degli argomenti per ::slotted().

Video di Chrome DevSummit

Se non sei arrivato al Chrome Dev Summit o forse l'hai fatto, ma non hai visto tutti gli interventi, dai un'occhiata alla playlist del Chrome Dev Summit 2018 sul nostro canale YouTube.

Eva e Phil hanno illustrato alcune tecniche interessanti per l'utilizzo dei Service worker in Building Faster, More Resilient Apps with Service Workers.

Mariko e Jake hanno parlato di come hanno sviluppato Squoosh in App web complesse JS-heavy, evitando la lentezza.

Katie e Houssein hanno illustrato alcune ottime tecniche per massimizzare le prestazioni del tuo sito in Speed Essentials: Key Techniques for Fast Websites.

Jake ha fatto cadere la torta. E nella playlist di Chrome DevSummit 2018 sono presenti molti altri fantastici video, quindi dai un'occhiata.

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 72.