Novità di Chrome 64

Pete LePage

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

E ce n'è molto altro.

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

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

ResizeObserver

Tenere traccia del cambiamento 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 layout thrashing.

Cosa succede se le dimensioni della finestra del browser non cambiano, ma è stato aggiunto un nuovo elemento al documento? Oppure hai aggiunto display: none a un elemento? Entrambe modificare le dimensioni di altri elementi all'interno della pagina.

ResizeObserver ti avvisa ogni volta che le dimensioni di un elemento cambiano e fornisce la nuova altezza e larghezza dell'elemento, riducendo il rischio di il layout thrashing.

Come per gli altri osservatori, utilizzarlo è piuttosto semplice, pertanto puoi creare un ResizeObserver e passiamo un callback al costruttore. Verrà eseguito il callback un array di ResizeOberverEntries, una voce per elemento osservato, che contengono 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: è simile a document.onresize per Elementi per ulteriori dettagli ed esempi reali.

Odio i tab-under. È quando una pagina apre un popup che mostra destinazione E naviga nella pagina. Di solito uno di questi è un annuncio qualcosa che non volevi.

A partire da Chrome 64, questi tipi di navigazioni verranno bloccati e Chrome mostra alcune UI native, consentendo all'utente di seguire il reindirizzamento se lo desiderano.

import.meta

Durante la scrittura di moduli JavaScript, spesso si desidera l'accesso a specifiche relativi al modulo corrente. Chrome 64 ora supporta import.meta all'interno dei moduli ed espone l'URL del modulo come import.meta.url.

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

E tanto altro.

Queste sono solo alcune delle modifiche di Chrome 64 per gli sviluppatori, ovviamente. ce n'è molto altro.

  • Chrome ora supporta acquisizioni con nome e gli caratteri di escape della 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 dei contenuti multimediali.
  • Ora puoi utilizzare Request.prototype.cache per visualizzare la modalità cache di un Request e determina se si tratta di una richiesta di ricaricamento.
  • Con l'API Focus Management, ora puoi impostare lo stato attivo su un elemento senza con l'attributo preventScroll.

window.alert()

Oh, e un altro! Sebbene questa non sia una "funzionalità per gli sviluppatori", rende felice. window.alert() non sposta più una scheda in background nella in primo piano! ma verrà mostrato quando l'utente passerà alla modalità precedente. a quella scheda.

Niente più passaggi casuali da parte delle schede perché qualcosa ha attivato un window.alert su di me. Ecco il tuo vecchio Google Calendar.

Assicurati di iscriverti alle nostre canale YouTube e riceverai una notifica via email ogni volta che viene lanciato un nuovo video.

Sono Pete LePage e, non appena viene rilasciato Chrome 65, qui per dirti le novità di Chrome.