Neu in Chrome 64

Pete LePage

  • Mit der Unterstützung von ResizeObservers werden Sie benachrichtigt, wenn sich die Größe des Inhalts-Rechtecks eines Elements geändert hat.
  • Module können jetzt mit import.meta auf hostspezifische Metadaten zugreifen.
  • Der Pop-up-Blocker wird verstärkt.
  • 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.

Vollständige Liste der Änderungen ansehen Liste der Änderungen am Chromium-Quell-Repository

ResizeObserver

Es kann etwas schwierig sein, zu verfolgen, wann sich die Größe eines Elements ändert. Höchstwahrscheinlich hängen Sie einen Listener an das resize-Ereignis des Dokuments an und rufen dann getBoundingClientRect oder getComputedStyle auf. Beides kann jedoch zu Layout-Überlastungen führen.

Was ist, wenn sich das Browserfenster nicht vergrößert hat, dem Dokument aber ein neues Element hinzugefügt wurde? Oder haben Sie einem Element display: none hinzugefügt? Beides kann 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-Überlastungen verringert.

Wie bei anderen Beobachtern ist die Verwendung ziemlich einfach: Erstellen Sie ein ResizeObserver-Objekt und übergeben Sie dem Konstruktor einen Rückruf. Dem Rückruf wird ein Array von ResizeOberverEntries übergeben, ein Eintrag pro beobachtetem Element, das 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 Praxisbeispiele finden Sie unter ResizeObserver: Das ist wie document.onresize für Elemente.

Ich hasse Unterbrechungen. Sie kennen sie: Wenn auf einer Seite ein Pop-up für ein bestimmtes Ziel geöffnet UND die Seite aufgerufen wird. In der Regel ist eine davon eine Anzeige oder etwas anderes, das Sie nicht wollten.

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

import.meta

Beim Erstellen von JavaScript-Modulen benötigen Sie häufig Zugriff auf hostspezifische Metadaten zum aktuellen Modul. 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 nur einige der Änderungen in Chrome 64 für Entwickler. Es gibt natürlich noch viele weitere.

  • Chrome unterstützt jetzt benannte Erfassungen und Unicode-Property-Escapes in regulären Ausdrücken.
  • Der Standardwert für preload für <audio>- und <video>-Elemente ist jetzt metadata. Dadurch wird Chrome mit anderen Browsern vereinheitlicht und die Bandbreite und Ressourcennutzung wird reduziert, da nur die Metadaten und nicht die Medien selbst geladen werden.
  • Sie können jetzt Request.prototype.cache verwenden, um den Cache-Modus eines Request anzusehen und festzustellen, ob eine Anfrage eine Aktualisierungsanfrage ist.
  • Mit der Focus Management API können Sie jetzt ein Element mit dem Attribut preventScroll fokussieren, ohne dorthin zu scrollen.

window.alert()

Oh, und noch eine Frage: Das ist zwar keine wirkliche „Entwicklerfunktion“, aber ich freue mich darüber. window.alert() bringt keinen Hintergrund-Tab mehr in den Vordergrund. Stattdessen wird die Benachrichtigung angezeigt, wenn der Nutzer zu diesem Tab zurückwechselt.

Kein automatisches Tab-Wechseln mehr, weil ein window.alert-Element ausgelöst wurde. Ich sehe deinen alten Google Kalender an.

Abonniere unseren YouTube-Kanal, um immer über neue Videos informiert zu werden.

Ich bin Pete LePage. Sobald Chrome 65 veröffentlicht wird, erzähle ich Ihnen gleich, was es Neues bei Chrome gibt.