Resize Observer API

Es gibt eine Vielzahl von Anwendungsfällen für Techniken des responsiven Designs (und andere darüber hinaus), die auf Änderungen der Größe eines Elements reagieren müssen, aber ihre Implementierungen waren zuvor oft ungeschickt und/oder anfällig.

Zum Beispiel sind Media Queries / window.matchMedia großartig, um Layouts bei bestimmten Punkten zu aktualisieren, wenn sich die Größe des Viewports ändert. Aber was, wenn Sie das Layout in Reaktion auf die Größenänderung eines spezifischen Elements ändern wollen, das nicht der äußere Container ist?

Um dies zu erreichen, wäre eine begrenzte Lösung, auf Änderungen an einem geeigneten Ereignis zu hören, das auf das Element hinweist, dessen Größe Sie ändern möchten (z. B. das Fenster-Resize-Ereignis), und dann die neuen Dimensionen oder andere Merkmale des Elements nach einer Größenänderung anhand von Element.getBoundingClientRect oder Window.getComputedStyle zu ermitteln.

Eine solche Lösung neigt dazu, nur für begrenzte Anwendungsfälle zu funktionieren, ist schlecht für die Leistung (das kontinuierliche Aufrufen der oben genannten Methoden führt zu einem großen Leistungseinbruch), und funktioniert oft nicht, wenn die Größe des Browserfensters nicht geändert wird.

Die Resize Observer API bietet eine Lösung für genau diese Arten von Problemen und mehr, indem sie Ihnen ermöglicht, Änderungen der Größe des Inhalts oder des Rahmenkastens eines Elements auf effiziente Weise zu beobachten und darauf zu reagieren. Sie bietet eine JavaScript-Lösung für das oft diskutierte Fehlen von Element-Abfragen in der Webplattform.

Die Nutzung ist einfach und entspricht im Wesentlichen anderen Observers wie