Neu in Chrome 64

Pete LePage

  • Mit der Unterstützung für ResizeObservers werden Sie benachrichtigt, wenn sich die Größe des Inhaltsrechtecks eines Elements ändert.
  • Module können jetzt mit import.meta auf hostspezifische Metadaten zugreifen.
  • Der Pop-up-Blocker wird immer besser.
  • window.alert() ändert den Fokus nicht mehr.

Und es gibt noch viel mehr!

Ich bin Pete LePage. Sehen wir uns an, was es Neues für Entwickler in Chrome 64 gibt.

Möchten Sie die vollständige Liste der Änderungen sehen? Liste der Änderungen im Chromium-Quell-Repository

ResizeObserver

Es kann schwierig sein, Änderungen der Größe eines Elements zu erfassen. Höchstwahrscheinlich hängen Sie einen Listener an das resize-Ereignis des Dokuments an und rufen dann getBoundingClientRect oder getComputedStyle auf. Beide können jedoch zu Layout-Thrashing führen.

Was passiert, wenn sich die Größe des Browserfensters nicht ändert, aber dem Dokument ein neues Element hinzugefügt wird? Oder haben Sie display: none einem Element hinzugefügt? Beide können die Größe anderer Elemente auf der Seite ändern.

ResizeObserver benachrichtigt Sie, wenn sich die Größe eines Elements ändert, und gibt die neue Höhe und Breite des Elements an. So wird das Risiko von Layout-Thrashing verringert.

Wie bei anderen Observers ist die Verwendung recht einfach: Erstellen Sie ein ResizeObserver-Objekt und übergeben Sie einen Callback an den Konstruktor. Der Callback erhält ein Array von ResizeOberverEntries-Einträgen, wobei jeder Eintrag die neuen Dimensionen 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 Informationen und Beispiele aus der Praxis finden Sie unter ResizeObserver: Das ist wie document.onresize für Elements.

Ich hasse Tab-Unders. Sie kennen das sicher: Eine Seite öffnet ein Pop-up-Fenster für ein bestimmtes Ziel UND navigiert auf der Seite. Normalerweise ist eine davon eine Anzeige oder etwas, das Sie nicht wollten.

Ab Chrome 64 werden diese Weiterleitungen blockiert und Chrome zeigt dem Nutzer eine native Benutzeroberfläche an, über die er die Weiterleitung bei Bedarf ausführen kann.

import.meta

Beim Schreiben von JavaScript-Modulen benötigen Sie häufig Zugriff auf hostspezifische Metadaten des aktuellen Moduls. Chrome 64 unterstützt jetzt die Eigenschaft import.meta in Modulen und gibt die URL für das Modul als import.meta.url aus.

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

…und vieles mehr

Das sind natürlich nur einige der Änderungen in Chrome 64 für Entwickler.

  • Chrome unterstützt jetzt benannte Erfassungen und Unicode-Property-Escapes in regulären Ausdrücken.
  • Der Standardwert für preload für die Elemente <audio> und <video> ist jetzt metadata. Dadurch wird Chrome an andere Browser angeglichen und die Bandbreite und Ressourcennutzung werden reduziert, da nur die Metadaten und nicht die Medien selbst geladen werden.
  • Mit Request.prototype.cache können Sie jetzt den Cachemodus eines Request aufrufen und feststellen, ob es sich bei einer Anfrage um eine Neuladeanfrage handelt.
  • Mit der Focus Management API können Sie jetzt ein Element fokussieren, ohne mit dem Attribut preventScroll zu ihm zu scrollen.

window.alert()

Ach ja, und noch etwas: Das ist zwar keine „Entwicklerfunktion“, aber es freut mich. window.alert() ruft keinen Hintergrundtab mehr in den Vordergrund auf. Stattdessen wird die Benachrichtigung angezeigt, wenn der Nutzer zu diesem Tab zurückkehrt.

Kein zufälliges Umschalten von Tabs mehr, weil etwas ein window.alert ausgelöst hat. Ich schaue dich an, alter Google Kalender.

Abonniere unseren YouTube-Kanal, um eine E-Mail-Benachrichtigung zu erhalten, wenn wir ein neues Video veröffentlichen.

Ich bin Pete LePage und sobald Chrome 65 veröffentlicht wird, erfahrt ihr hier, was es Neues in Chrome gibt.