Zusammenfassung

  • Das W3C veröffentlichte am 11. Februar 2020 den ersten öffentlichen Resize-Observer-Arbeitsentwurf. Die Schnittstelle beobachtet Größenänderungen eines Elements und übergibt Messdaten an eine Callback-Funktion.
  • Der Editorentwurf der CSSWG unterscheidet Content Box, Border Box und Device Pixel Content Box. Sein Verarbeitungsmodell begrenzt wiederholte Benachrichtigungen während der Darstellung und meldet zurückgestellte Änderungen.

Ein Diagramm steckt in einer Karte, die wiederum in einem Raster liegt. Das Raster teilt Breite zu, die Diagrammsoftware bestimmt Beschriftung und Achsen. Wenn die Seitenleiste aufgeht, wird die Karte schmaler, ohne dass sich das Fenster ändert. Das Raster kennt keine Länge der Achsenbeschriftungen. Das Diagramm entscheidet nicht über das Raster. Beide brauchen eine kurze, genaue Auskunft über die tatsächlich zugeteilte Breite.

Der erste öffentliche W3C-Arbeitsentwurf vom 11. Februar 2020 beschreibt ResizeObserver für Größenänderungen von Elementen. observe() meldet ein Ziel an; wenn dessen beobachtete Box ihre Größe ändert, empfängt ein Callback einen Eintrag. Mit unobserve() lässt sich ein Ziel entfernen, mit disconnect() die Beobachtung beenden. Die W3C-Veröffentlichungsgeschichte bestätigt Datum und Status des ersten öffentlichen Entwurfs. Endlich wird das Teil gemessen, das sich anpassen muss.

Das Diagramm kann nach einer Meldung weniger Achsenwerte zeigen, die Legende verschieben oder neu zeichnen. Der Browser liefert die Größe, die aus dem Layout entstanden ist. Der Autor entscheidet, wie seine Darstellung diese Größe nutzt. So kann die Seite ihre Spalten umbauen, ohne in das Innenleben jeder Karte eingreifen zu müssen.

Der CSSWG-Editorentwurf Resize Observer Module Level 1 stellt drei Messflächen bereit: content-box, border-box und device-pixel-content-box. Die erste betrifft den Inhaltsbereich. Die zweite schließt den Randbereich ein. Die dritte beschreibt den Inhaltsbereich in Gerätepixeln vor CSS-Transformationen. Text benötigt den Raum für Zeilen, eine gerahmte Karte ihre Außenmaße, eine Canvas-Zeichnung die verfügbaren Bildpunkte. Das richtige Maßband hängt von der Arbeit ab.

Die bei observe() gewählte Box bestimmt, welche Änderung eine Benachrichtigung auslöst. Der gelieferte Eintrag enthält Größeninformationen. Auslösebedingung und verfügbare Daten sind verwandte, aber verschiedene Fragen. Ein Widget, das entfernt wird, kann seine Beobachtung abmelden. Der Vermesser braucht nicht weiter vor einem abgerissenen Zimmer zu warten.

Die Callback-Funktion kann selbst eine Schleife bauen. Sie sieht eine schmale Karte, verbreitert sie, bekommt einen neuen Wert, macht sie wieder schmaler und fängt von vorn an. Der CSSWG-Entwurf bindet die Verarbeitung an den Renderzyklus und nutzt die Tiefe der Elemente, um wiederholte Zustellungen in einem Durchlauf zu begrenzen. Nicht zugestellte Änderungen können eine Resize-Loop-Fehlermeldung auslösen und in einem späteren Bild behandelt werden. Der Autor sollte seine Reaktion zur Ruhe bringen: Das Diagramm in die zugeteilte Box einpassen, statt die Box selbst hin und her zu schieben.

Der CSSWG-Text ist ein Editorentwurf vom 22. November 2022; die W3C-Chronik setzt den ersten öffentlichen Entwurf auf 2020. Die Originale erzählen von einer kleinen, wirksamen Verschiebung. Der Browser misst den Raum eines bestimmten Elements. Das Widget entscheidet, was darin Platz hat.