Web/API/ResizeObserverEntry

From Get docs


The ResizeObserverEntry interface represents the object passed to the ResizeObserver() constructor's callback function, which allows you to access the new dimensions of the Element or SVGElement being observed.

Properties

ResizeObserverEntry.borderBoxSize Read only
An object containing the new border box size of the observed element when the callback is run.
ResizeObserverEntry.contentBoxSize Read only
An object containing the new content box size of the observed element when the callback is run.
ResizeObserverEntry.contentRect Read only
A DOMRectReadOnly object containing the new size of the observed element when the callback is run. Note that this is better supported than the above two properties, but it is left over from an earlier implementation of the Resize Observer API, is still included in the spec for web compat reasons, and may be deprecated in future versions.
ResizeObserverEntry.target Read only
A reference to the Element or SVGElement being observed.

Note: The content box is the box in which content can be placed, meaning the border box minus the padding and border width. The border box encompasses the content, padding, and border. See The box model for further explanation.


Methods

None.

Examples

The following snippet is taken from the [[../../../../../../mdn.github.io/dom-examples/resize-observer/resize-observer-text|resize-observer-text.html]] (see source) example. This uses a simple feature detection test to see if the browser supports the newer contentBoxSize property — if so, it uses that to get the sizing data it needs. If not, it uses the older contentRect property.

const resizeObserver = new ResizeObserver(entries => {
  for (let entry of entries) {
    if(entry.contentBoxSize) {
      h1Elem.style.fontSize = Math.max(1.5, entry.contentBoxSize.inlineSize/200) + 'rem';
      pElem.style.fontSize = Math.max(1, entry.contentBoxSize.inlineSize/600) + 'rem';
    } else {
      h1Elem.style.fontSize = Math.max(1.5, entry.contentRect.width/200) + 'rem';
      pElem.style.fontSize = Math.max(1, entry.contentRect.width/600) + 'rem';
    }
  }
});

resizeObserver.observe(divElem);

Specifications

Specification Status Comment
Resize ObserverThe definition of 'ResizeObserverEntry' in that specification. Editor's Draft Initial definition.

Browser compatibility

Update compatibility data on GitHub

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
ResizeObserverEntry Chrome

Full support 64

Edge

Full support 79

Firefox

Full support 69

IE

No support No

Opera

Full support Yes

Safari

No support No

WebView Android

Full support 64

Chrome Android

Full support 64

Firefox Android

No support No

Opera Android

Full support Yes

Safari iOS

No support No

Samsung Internet Android

Full support 9.0

borderBoxSize

Experimental'

Chrome

Full support 84

Edge

Full support 84

Firefox

Full support 69

IE

No support No

Opera

Full support Yes

Safari

No support No

WebView Android

Full support 84

Chrome Android

Full support 84

Firefox Android

No support No

Opera Android

Full support Yes

Safari iOS

No support No

Samsung Internet Android

No support No

contentBoxSize

Experimental'

Chrome

Full support 84

Edge

Full support 84

Firefox

Full support 69

IE

No support No

Opera

Full support Yes

Safari

No support No

WebView Android

Full support 84

Chrome Android

Full support 84

Firefox Android

No support No

Opera Android

Full support Yes

Safari iOS

No support No

Samsung Internet Android

No support No

contentRect Chrome

Full support 64

Edge

Full support 79

Firefox

Full support 69

IE

No support No

Opera

Full support Yes

Safari

No support No

WebView Android

Full support 64

Chrome Android

Full support 64

Firefox Android

No support No

Opera Android

Full support Yes

Safari iOS

No support No

Samsung Internet Android

Full support 9.0

target Chrome

Full support 64

Edge

Full support 79

Firefox

Full support 69

IE

No support No

Opera

Full support Yes

Safari

No support No

WebView Android

Full support 64

Chrome Android

Full support 64

Firefox Android

No support No

Opera Android

Full support Yes

Safari iOS

No support No

Samsung Internet Android

Full support 9.0

Legend

Full support  
Full support
No support  
No support
Experimental. Expect behavior to change in the future.'
Experimental. Expect behavior to change in the future.