Summary

  • The W3C published the first public Resize Observer Working Draft on 11 February 2020. It proposed an observer for changes to an element’s size, giving authors a callback and entries describing the observed box.
  • The CSSWG editor’s draft describes choices among content, border and device-pixel content boxes, and a delivery algorithm that limits repeated resize notifications within a rendering cycle. The component receives a measurement; its author decides what layout or drawing to change.

The browser window used to be the obvious thing to measure. If someone dragged its edge, a script could hear about a resize and adapt. Then pages became apartment buildings. A narrow news card might live beside a collapsible sidebar; the card’s width could change while the window did not move a pixel. An editor could add a long caption; a grid could negotiate a new column; the card would find itself wearing a coat two sizes too small. Watching the building’s exterior wall was a poor way to learn whether one room had shrunk.

The W3C First Public Working Draft of 11 February 2020 gave this problem a name and an API. A ResizeObserver watches elements and delivers entries to a callback when their observed sizes change. An author can begin observing a target, stop observing it, or disconnect the observer. The W3C publication history records that 2020 document as the series’ first public Working Draft. That date matters: it anchors the proposal in an era when reusable page pieces needed facts about their own allotted space.

Picture a chart inside a dashboard card. The outer grid decides how wide the card becomes. The chart code knows how to draw axes and labels, but the grid does not know how long those labels are. The observer supplies the missing conversation: after layout changes the target’s measured box, the browser can deliver a size entry. The chart can then choose fewer tick labels or redraw at a different scale. The browser reports the room’s dimensions; the chart decides where to put its furniture.

Which dimensions? The CSSWG Resize Observer Module Level 1 editor’s draft describes observation of a content-box, a border-box, or a device-pixel-content-box. The first concerns the content area; the second includes the border area; the third reports the content area in device pixels before CSS transforms. Those choices serve different work. A text layout may care about the content box. A framed card may care about its outside border. A canvas drawing can care about the device pixels available for crisp rendering. The API asks authors to choose the ruler that matches the job.

The entry can carry size information for those boxes, while the observed box option determines which change triggers delivery. That distinction saves a common mistake: the callback’s data and its notification condition are related, but they are separate decisions. A card can inspect an entry’s fields, yet its observer is registered to notice the box selected for observation. The editor’s draft also describes unobserve() and disconnect(); a card removed from the page need not keep a measurement appointment on the calendar.

There is a trap hidden in the callback. Suppose it sees a narrow card, enlarges the card, receives another measurement, shrinks it, receives another measurement, and repeats. The browser cannot spend the whole afternoon handing a tape measure back and forth while the reader waits. The editor’s draft places Resize Observer processing in the rendering cycle and uses depth-based delivery to constrain repeated notifications. Changes left undelivered in that pass can be reported through a resize-loop error and handled in a later frame.

The practical lesson is to design the reaction so it settles: resize the chart inside its allotted box, for example, without making the box itself oscillate.

This is a quiet transfer of authority. The browser owns layout measurements and the timing of delivery. The page author knows what adaptation is useful for a particular card. Neither side has to pretend that the window width answers every question about a nested element. A component can observe the space it actually received and decide how to use it.

The CSSWG document is an editor’s draft dated 22 November 2022, and the W3C history lists the 2020 First Public Working Draft for this series. Those originals establish the mechanism and its documented status. They make no adoption census for websites and provide no measured speed improvement for any particular dashboard. The invention is the smaller unit of attention: the browser measures a widget’s own box, then lets the widget’s author earn the right to rearrange the room.