Docs
19.4-Resize-Observer
19.4 Resize Observer
Overview
ResizeObserver watches for changes to an element's content or border box dimensions, enabling responsive component design.
How ResizeObserver Works
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ResizeObserver Flow ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā¤
ā ā
ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā
ā ā Observed Element ā ā
ā ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā ā
ā ā ā Content Box ā ā ā
ā ā ā ā ā ā
ā ā ā Resize detected when: ā ā ā
ā ā ā - Width changes ā ā ā
ā ā ā - Height changes ā ā ā
ā ā ā - Content flows ā ā ā
ā ā ā ā ā ā
ā ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā ā
ā ā Border Box ā ā
ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā
ā ā ā
ā ā¼ ā
ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā
ā ā ResizeObserverEntry ā ā
ā ā - contentRect (DOMRectReadOnly) ā ā
ā ā - contentBoxSize ā ā
ā ā - borderBoxSize ā ā
ā ā - target (observed element) ā ā
ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā
ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ResizeObserverEntry Properties
| Property | Description |
|---|---|
target | The observed element |
contentRect | DOMRectReadOnly with content dimensions |
contentBoxSize | Array of { blockSize, inlineSize } for content |
borderBoxSize | Array of { blockSize, inlineSize } for border box |
devicePixelContentBoxSize | Array of device pixel dimensions |
Box Types
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā
ā Border Box = Content + Padding + Border ā
ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā
ā ā border ā ā
ā ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā ā
ā ā ā padding ā ā ā
ā ā ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā ā ā
ā ā ā ā ā ā ā ā
ā ā ā ā Content Box ā ā ā ā
ā ā ā ā ā ā ā ā
ā ā ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā ā ā
ā ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā ā
ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā
ā ā
ā contentRect: { x, y, width, height, top, right, bottom, left } ā
ā contentBoxSize: { inlineSize (width), blockSize (height) } ā
ā borderBoxSize: { inlineSize (width), blockSize (height) } ā
ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
Basic Usage
// Create observer
const observer = new ResizeObserver((entries) => {
for (const entry of entries) {
console.log('Element:', entry.target);
console.log('Width:', entry.contentRect.width);
console.log('Height:', entry.contentRect.height);
}
});
// Start observing
observer.observe(element);
// Observe with box option
observer.observe(element, { box: 'border-box' });
// Stop observing
observer.unobserve(element);
observer.disconnect();
Common Use Cases
- ā¢Responsive Components: Adapt layout based on container size
- ā¢Canvas Resizing: Keep canvas size in sync with container
- ā¢Virtual Scrolling: Recalculate visible items on resize
- ā¢Chart Libraries: Redraw visualizations on size change
- ā¢Breakpoint Detection: Component-level responsive behavior
Summary
- ā¢More efficient than window resize event
- ā¢Observes individual elements
- ā¢Reports both content and border box sizes
- ā¢Handles CSS transitions and animations
- ā¢Useful for container queries polyfill