📐 ResizeObserver

Beobachtet Größenänderungen von DOM-Elementen ohne Scroll-Events und ohne Layout-Thrashing. Ziehe die Ecke rechts unten.

— × —

↙ Ecke ziehen zum Resizen

BREITE (CONTENT-BOX)

—

HÖHE (CONTENT-BOX)

—

RESIZE-EVENTS

DEVICE PIXEL RATIO

—

Mehrere Elemente gleichzeitig beobachten — ein Observer, viele Targets:

BOX A
—

BOX B
—

⚡ Quick-Test: ResizeObserver

Welche Box-Größe liefert contentBoxSize im Gegensatz zu borderBoxSize?

A) contentBoxSize: Nur der Inhalt (ohne Padding und Border). borderBoxSize: Alles inklusive Padding + Border — entspricht getComputedStyle(width).

B) contentBoxSize gibt die Größe in physischen Pixeln (devicePixelRatio) zurück, borderBoxSize in CSS-Pixeln.

C) contentBoxSize ist veraltet — man soll immer borderBoxSize nutzen.