Resize Observer API
E856228
The Resize Observer API is a modern web API that lets developers efficiently observe and respond to changes in the size of DOM elements without relying on window resize events or polling.
Statements (48)
| Predicate | Object |
|---|---|
| instanceOf |
DOM API
ⓘ
Web API ⓘ browser feature ⓘ |
| availableIn |
Google Chrome
NERFINISHED
ⓘ
Microsoft Edge NERFINISHED ⓘ Mozilla Firefox NERFINISHED ⓘ Safari NERFINISHED ⓘ modern browsers ⓘ |
| benefit |
decouples layout from window resize events
ⓘ
more efficient than polling for size changes ⓘ supports responsive components ⓘ |
| callbackParameter |
entries
ⓘ
observer ⓘ |
| definedBy | W3C Resize Observer specification NERFINISHED ⓘ |
| designedFor |
component-based architectures
ⓘ
responsive design ⓘ |
| documentation |
https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver
ⓘ
https://wicg.github.io/ResizeObserver/ ⓘ |
| entryProperty |
borderBoxSize
ⓘ
contentBoxSize ⓘ contentRect ⓘ devicePixelContentBoxSize ⓘ target ⓘ |
| executionEnvironment | web browser ⓘ |
| introduced | mid-2010s ⓘ |
| mainClassMethod |
disconnect
ⓘ
observe ⓘ unobserve ⓘ |
| notAvailableIn | Internet Explorer NERFINISHED ⓘ |
| partOf | Web Platform NERFINISHED ⓘ |
| primaryInterface | ResizeObserver NERFINISHED ⓘ |
| providesClass | ResizeObserver NERFINISHED ⓘ |
| providesInterface | ResizeObserverEntry NERFINISHED ⓘ |
| purpose |
avoid reliance on window resize events for element sizing
ⓘ
observe changes to the size of DOM elements ⓘ react to element resize events without polling ⓘ |
| relatedTo |
Intersection Observer API
NERFINISHED
ⓘ
Mutation Observer API NERFINISHED ⓘ window resize event ⓘ |
| standardizationStatus | Living Standard ⓘ |
| supports |
border box size observation
ⓘ
content box size observation ⓘ device pixel content box size observation ⓘ |
| supportsLanguage | JavaScript NERFINISHED ⓘ |
| useCase |
adapting layout when containers resize
ⓘ
implementing responsive UI components ⓘ lazy loading or virtualization based on element size ⓘ synchronizing canvas or SVG size with container ⓘ |
Referenced by (2)
Full triples — surface form annotated when it differs from this entity's canonical label.