Novità di Chrome 71

Pete LePage

In Chrome 71 abbiamo aggiunto il supporto per:

• La visualizzazione dei tempi relativi ora fa parte dell'API Intl.
• Specifica sulla quale parte del testo deve essere visualizzata la sottolineatura per il testo che scorre verticalmente.
• Richiesta di attivazione dell'utente prima di utilizzare l'API di sintesi vocale.

E c'è molto altro.

Mi chiamo Pete LePage. Andiamo a scoprire le novità per gli sviluppatori in Chrome 71.

Log delle modifiche

Questa pagina illustra solo alcuni dei punti salienti. Per altre modifiche in Chrome 71, consulta i link di seguito.

• Elenco delle modifiche al repository di codice sorgente di Chromium
• Aggiornamenti di ChromeStatus.com per Chrome 71
• Ritiro e rimozione di funzionalità in Chrome 71

Visualizzare gli orari relativi con Intl.RelativeTimeFormat()

Twitter mostra il tempo relativo per l'ultimo post

Molte app web utilizzano frasi come "ieri", "tra due giorni" o "un'ora fa" per indicare quando è accaduto o sta per accadere, anziché visualizzare data e ora complete.

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

Chrome 71 introduce Intl.RelativeTimeFormat(), che sposterà il lavoro sul motore JavaScript e abiliterà la formattazione localizzata dei tempi relativi. Questo ci offre un piccolo miglioramento delle prestazioni e significa che abbiamo bisogno di queste librerie solo come polyfill 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'

È facile da usare: crea una nuova istanza e specifica le impostazioni internazionali, poi chiama semplicemente format con l'ora relativa. Per maggiori dettagli, consulta il post di Mathias su Intl.RelativeTimeFormat API.

Specificare la posizione della sottolineatura per il testo verticale

Testo verticale con sottolineature incoerenti

Quando il testo cinese o giapponese viene visualizzato in un flusso verticale, i browser sono incoerenti con la posizione del sottolineato, che può essere a sinistra o a destra.

In Chrome 71, la proprietà text-underline-position ora accetta left o right come parte della specifica di decorazione del testo CSS3. La specifica di decorazione del testo CSS3 aggiunge diverse nuove proprietà che consentono di specificare, ad esempio, il tipo di linea 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 dell'utente

Ci è capitato a tutti di visitare un sito che improvvisamente inizia a parlare. Le norme sulla riproduzione automatica impediscono ai siti di riprodurre automaticamente file audio o video con audio. Alcuni siti hanno cercato di aggirare il problema utilizzando invece l'API di sintesi vocale.

A partire da Chrome 71, l'API di sintesi vocale ora richiede un qualche tipo di attivazione da parte dell'utente sulla pagina prima di funzionare. Ciò lo rende in linea con le altre norme relative alla riproduzione automatica. Se tenti di utilizzarlo prima che l'utente abbia interagito con la pagina, verrà attivato 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);
}

Nota: per assicurarti che il codice funzioni, ti consiglio di racchiudere la chiamata di sintesi vocale in un blocco try/catch, in modo che se la pagina non venga attivata, il resto dell'app non verrà interrotto.

Non c'è niente di peggio che visitare un sito e rimanere sorpresi, insieme ai colleghi seduti intorno a te.

E tanto altro.

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

• Ora il metodo Element.requestFullscreen() può essere personalizzato su Android e ti consente di scegliere tra mostrare la barra di navigazione o una modalità completamente immersiva in cui non vengono visualizzati controlli dell'agente utente fino a quando non viene eseguito un gesto dell'utente.
• La modalità delle credenziali predefinite per le richieste di script del modulo è passata da omit a same-origin.
• Inoltre, Chrome 71 ora calcola la specificità per le pseudoclassi :host() e :host-context(), nonché per gli argomenti di ::slotted(), in linea con la specifica Shadow DOM v1.

Video del Chrome DevSummit

Se non hai partecipato al Chrome Dev Summit o se ci sei stato, ma non hai assistito a tutti i talk, dai un'occhiata alla playlist del Chrome Dev Summit 2018 sul nostro canale YouTube.

Eva e Phil hanno illustrato alcune tecniche utili per utilizzare i service worker in Creare app più veloci e resilienti con i service worker.

Mariko e Jake hanno parlato di come hanno creato Squoosh in App web complesse con un'elevata quantità di codice JS, evitando i rallentamenti.

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 lasciato cadere la torta. Ci sono molti altri fantastici video nella playlist Chrome DevSummit 2018, quindi guardali.

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.

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