← Back to release summary

Resize Observer Updates

Category
DOM
Type
New or changed feature
Status
Enabled by default (Chrome 84)
Intent stage
Start prototyping

Summary

ResizeObserver is a an existing DOM observer API intended to be used for observing the size of DOM elements. There have been three updates to the spec: * A new ResizeObserverSize type was added * New properties on ResizeObserverEntry, specifically contentBoxSize, borderBoxSize, and devicePixelContentBoxSize * Exposure of new properties as sequences

Motivation

Web Components want to be responsive: a map that tiles its content area; a menu that hides its title when space is too narrow. There is currently no API for an Component to detect when its size has changed. Web Applications can monitor viewport changes with window.resize event, or @media queries. ResizeObserver provides an API that gives Elements a way to observe, and respond to changes in their size. The API is a classic observer: observe/unobserve/disconnect.

Standards & signals

Docs: https://drafts.csswg.org/resize-observer/

Explainers: https://drafts.csswg.org/resize-observer/

View on chromestatus.com