Novità di Chrome 64

Pete LePage

  • Il supporto di ResizeObservers ti invia una notifica quando le dimensioni del rettangolo dei contenuti di un elemento cambiano.
  • I moduli possono ora accedere a metadati specifici dell'host con import.meta.
  • Il blocco popup diventa efficace.
  • window.alert() non cambia più lo stato attivo.

E c'è molto altro.

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

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

ResizeObserver

Monitorare le variazioni delle dimensioni di un elemento può essere un po' complicato. Molto probabilmente, collegherai un listener all'evento resize del documento, quindi chiamerai getBoundingClientRect o getComputedStyle. Tuttavia, entrambi possono causare il thrashing del layout.

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

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

Come per altri osservatori, utilizzarlo è piuttosto semplice: crea un oggetto ResizeObserver e passa un callback al costruttore. Il callback verrà fornito un array di ResizeOberverEntries, una voce per elemento osservato, che contiene 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);

Consulta ResizeObserver: è come document.onresize per Elements per ulteriori dettagli ed esempi reali.

Odio le schede sotto. Li conosci, si verificano quando una pagina apre una finestra popup per una destinazione E naviga nella pagina. Di solito uno di questi è un annuncio o qualcosa che non vuoi.

A partire da Chrome 64, questo tipo di navigazione verrà bloccato e Chrome mostrerà all'utente un'interfaccia utente nativa, consentendogli di seguire il reindirizzamento se vuole.

import.meta

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

Questa operazione è molto utile quando vuoi risolvere le risorse relative al file del modulo anziché al documento HTML corrente.

E tanto altro.

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

  • Chrome ora supporta le catture denominate e gli escapamenti delle proprietà Unicode nelle espressioni regolari.
  • Il valore predefinito di preload per gli elementi <audio> e <video> ora è metadata. In questo modo Chrome si allinea con gli altri browser e consente di ridurre la larghezza di banda e l'utilizzo delle 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 ricarica.
  • Utilizzando l'API Focus Management, ora puoi impostare lo stato attivo su un elemento senza scorrirlo con l'attributo preventScroll.

window.alert()

Oh, e un altro! Anche se non si tratta di una "funzionalità per sviluppatori", mi fa felice. window.alert() non mette più in primo piano una scheda di sfondo. L'avviso verrà invece mostrato quando l'utente torna a quella scheda.

Non dovrò più cambiare scheda in modo casuale perché qualcosa ha attivato un window.alert. Mi riferisco al vecchio Google Calendar.

Assicurati di iscriverti 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 65, sarò qui per raccontarti le novità di Chrome.