Novità di Chrome 64

Pete LePage

  • Il supporto di ResizeObservers ti avvisa quando le dimensioni del rettangolo dei contenuti di un elemento vengono modificate.
  • I moduli possono ora accedere per ospitare metadati specifici con import.meta.
  • Il blocco dei popup diventa potente.
  • window.alert() non modifica più lo stato attivo.

E c'è molto altro.

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

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

ResizeObserver

Monitorare i cambiamenti delle dimensioni di un elemento può essere complicato. Molto probabilmente, assocerai un listener all'evento resize del documento, quindi la chiamata a getBoundingClientRect o getComputedStyle. Entrambi, però, possono causare thrashing del layout.

E se la finestra del browser non cambiasse, ma fosse stato aggiunto un nuovo elemento al documento? Oppure hai aggiunto display: none a un elemento? Entrambi possono modificare le dimensioni degli altri elementi all'interno della pagina.

ResizeObserver ti invia una notifica ogni volta che le dimensioni di un elemento cambiano e fornisce la nuova altezza e la nuova larghezza dell'elemento, riducendo il rischio di thrash del layout.

Come altri osservatori, il suo utilizzo è piuttosto semplice: crea un oggetto ResizeObserver e passa un callback al costruttore. Al callback verrà fornito un array di ResizeOberverEntries, una voce per elemento osservato, che conterrà le nuove dimensioni dell'elemento.

const ro = new ResizeObserver( entries => {
  for (const entry of entries) {
    const cr = entry.contentRect;
    console.log('Element:', entry.target);
    console.log(`Element size: ${cr.width}px × ${cr.height}px`);
    console.log(`Element padding: ${cr.top}px ; ${cr.left}px`);
  }
});

// Observe one or multiple elements
ro.observe(someElement);

Dai un'occhiata a ResizeObserver: è come document.onresize per Elementi per ulteriori dettagli ed esempi reali.

Odio i tab-under. Sai bene: quando una pagina apre un popup con una destinazione E naviga nella pagina. Solitamente uno è un annuncio o qualcosa che non desideravi.

A partire da Chrome 64, questo tipo di navigazione verrà bloccato e Chrome mostrerà all'utente alcune UI native, che potranno seguire il reindirizzamento, se lo desiderano.

import.meta

Quando scrivi moduli JavaScript, spesso vuoi accedere a metadati specifici dell'host relativi al modulo attuale. Chrome 64 ora supporta la proprietà import.meta all'interno dei moduli ed espone l'URL del modulo come import.meta.url.

Ciò è davvero utile quando vuoi risolvere risorse relative al file del modulo anziché al documento HTML corrente.

E tanto altro.

Queste sono solo alcune delle modifiche di Chrome 64 per gli sviluppatori, e ovviamente ce ne sono molte altre.

  • Chrome ora supporta acquisizioni con nome e escape delle proprietà Unicode nelle espressioni regolari.
  • Il valore predefinito di preload per gli elementi <audio> e <video> è ora metadata. Questo allinea Chrome con gli altri browser e contribuisce a ridurre l'utilizzo di larghezza di banda e risorse caricando solo i metadati e non i contenuti multimediali stessi.
  • Ora puoi utilizzare Request.prototype.cache per visualizzare la modalità cache di un Request e determinare se una richiesta è una richiesta di ricaricamento.
  • Utilizzando l'API Focus Management, ora puoi impostare lo stato attivo su un elemento senza scorrerlo con l'attributo preventScroll.

window.alert()

Oh, e ancora un'altra! Anche se questa non è una "funzionalità per sviluppatori", mi rallegra. window.alert() non mette più una scheda in primo piano in primo piano. L'avviso verrà invece mostrato quando l'utente torna a quella scheda.

Non è più necessario cambiare scheda in modo casuale perché è stato attivato window.alert su di me. Ecco il tuo vecchio Google Calendar.

Assicurati di iscriverti al nostro canale YouTube e riceverai una notifica via email ogni volta che pubblicheremo un nuovo video.

Mi chiamo Pete LePage e non appena uscirà Chrome 65, sarò qui per dirvi le novità di Chrome.