Neu in Chrome 64

Pete LePage

  • Wenn ResizeObservers unterstützt wird, werden Sie benachrichtigt, wenn sich die Größe des Inhaltsrechtecks eines Elements geändert hat.
  • Module können jetzt mit import.meta auf bestimmte Metadaten zugreifen.
  • Der Pop-up-Blocker wird immer stärker.
  • window.alert() ändert den Fokus nicht mehr.

Und es gibt noch viel mehr!

Mein Name ist Pete LePage. Sehen wir uns nun an, was es für Entwickler Neues in Chrome 64 gibt.

Möchtest du die vollständige Liste der Änderungen sehen? Weitere Informationen finden Sie in der Änderungsliste des Chromium-Quell-Repositorys.

ResizeObserver

Zu verfolgen, wann sich die Größe eines Elements ändert, kann mühsam sein. Höchstwahrscheinlich hängen Sie einen Listener an das resize-Ereignis des Dokuments an und rufen dann getBoundingClientRect oder getComputedStyle auf. Beides kann jedoch das Layout erschlagen.

Was passiert, wenn sich die Größe des Browserfensters nicht ändert, aber dem Dokument ein neues Element hinzugefügt wird? Oder haben Sie einem Element display: none hinzugefügt? In beiden Fällen kann die Größe der anderen Elemente auf der Seite geändert werden.

ResizeObserver benachrichtigt Sie, wenn sich die Größe eines Elements ändert, und stellt die neue Höhe und Breite des Elements bereit, um das Risiko einer Überlastung des Layouts zu verringern.

Wie bei anderen Beobachtern ist es ziemlich einfach, ein ResizeObserver-Objekt zu erstellen und einen Callback an den Konstruktor zu übergeben. Der Callback erhält ein Array von ResizeOberverEntries. Dabei handelt es sich um einen Eintrag pro beobachtetem Element, das die neuen Abmessungen für das Element enthält.

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);

Weitere Details und Beispiele aus der Praxis finden Sie unter ResizeObserver: Entspricht document.onresize für Elemente.

Ich hasse Tab-unders. Sie kennen sie: Wenn eine Seite ein Pop-up zu einem Ziel öffnet UND auf der Seite navigiert. Meist ist einer davon eine Anzeige oder etwas, das Sie nicht wollten.

Ab Chrome 64 werden solche Navigationen blockiert und Chrome zeigt dem Nutzer eine native UI an, über die er bei Bedarf der Weiterleitung folgen kann.

import.meta

Beim Schreiben von JavaScript-Modulen möchten Sie häufig auf hostspezifische Metadaten zum aktuellen Modul zugreifen. Chrome 64 unterstützt jetzt das Attribut import.meta in Modulen und stellt die URL für das Modul als import.meta.url bereit.

Das ist sehr hilfreich, wenn Sie Ressourcen relativ zur Moduldatei und nicht zum aktuellen HTML-Dokument auflösen möchten.

…und vieles mehr

Dies sind nur einige der Änderungen für Entwickler in Chrome 64. Und natürlich gibt es noch viel mehr.

  • Chrome unterstützt jetzt benannte Erfassungen und Unicode-Maskierungen in regulären Ausdrücken.
  • Der Standardwert von preload für die Elemente <audio> und <video> ist jetzt metadata. Dadurch wird Chrome mit anderen Browsern aufeinander abgestimmt und die Bandbreite und die Ressourcennutzung werden reduziert, da nur die Metadaten und nicht die Medien selbst geladen werden.
  • Sie können jetzt Request.prototype.cache verwenden, um den Cache-Modus einer Request aufzurufen und zu bestimmen, ob eine Anfrage eine Anfrage zum Aktualisieren ist.
  • Wenn Sie die Focus Management API verwenden, können Sie mit dem Attribut preventScroll ein Element fokussieren, ohne dorthin scrollen zu müssen.

window.alert()

Und noch eine! Es ist zwar keine „Entwicklerfunktion“, aber es macht mich glücklich. Mit window.alert() wird kein Hintergrundtab mehr im Vordergrund angezeigt. Stattdessen wird die Benachrichtigung angezeigt, wenn der Nutzer zu diesem Tab zurückkehrt.

Kein zufälliges Wechseln zwischen Tabs mehr, weil bei mir ein window.alert ausgelöst wurde. Im alten Google Kalender.

Abonniere unseren YouTube-Kanal. Wenn wir ein neues Video veröffentlichen, wirst du per E-Mail benachrichtigt.

Ich bin Pete LePage. Sobald Chrome 65 veröffentlicht wird, melde ich Ihnen, was es Neues in Chrome gibt!