The Resize Observer API provides a performant mechanism by which code  can monitor an element for changes to its size, with notifications being delivered to the observer each time the size changes. Concepts and Usage There is a whole raft of use cases for responsive design techniques  (and others besides) that respond to changes in an element's size, but  previously their implementations have often been hacky and/or brittle. For example, / are great for updating layouts at specific points when the viewport  changes sizes, but what if you want to change layout in response to a  specific element's size changing, which isn't the outer container? media queries window.matchMedia To achieve this, a limited solution would be to listen to changes to a suitable event that hints at the element you are interested in changing size (e.g. the window ), then figure out what the new dimensions or other features of the element after a resize using or , for example. resize event Element.getBoundingClientRect Window.getComputedStyle resizeObserver = ResizeObserver( { ( entry entries) { (entry.contentBoxSize) {
      entry.target.style.borderRadius = .min( , (entry.contentBoxSize.inlineSize/ ) +
                                                      (entry.contentBoxSize.blockSize/ )) + ;
    } {
      entry.target.style.borderRadius = .min( , (entry.contentRect.width/ ) +
                                                      (entry.contentRect.height/ )) + ;
    }
  }
});

resizeObserver.observe( .querySelector( )); const new => entries for let of if Math 100 10 10 'px' else Math 100 10 10 'px' document 'div' Such a solution tends to only work for limited use cases, be bad for performance (continually calling the above methods would result in a big performance hit), and often won't work when the browser window size is not changed. The Resize Observer API provides a solution to exactly these kinds of problems and more besides allowing you to easily observe and respond to changes in the size of an element’s content or border-box in a performant way. It provides a JavaScript solution to the often-discussed lack of element queries in the web platform. Usage is simple, and pretty much the same as other observers, such as Performance Observer or Intersection Observer — you create a new ResizeObserver object using the ResizeObserver() constructor, then use ResizeObserver.observe() to make it look for changes to a specific element's size. A callback function set up inside the constructor then runs every time the size changes, providing access to the new dimensions and allowing you to do anything you like in response to those changes. Interfaces ResizeObserver Provides the ability to register new observers and to start and stop observing elements. ResizeObserverEntry Describes a single element which has been resized, identifying the element and its new size. Examples You can find a couple of simple examples on our GitHub repo: ( ): A simple example with a green box, sized as a percentage of the viewport size. When the viewport size is changed, the box's rounded corners change in proportion to the size of the box. We could just implement this using with a percentage, but that quickly leads to ugly-looking elliptical corners, whereas the above solution gives you nice square corners that scale with the box size. resize-observer-border-radius.html see source border-radius ( ): Here we use the resize observer to change the of a header and paragraph as a slider’s value is changed causing the containing <div> to change the width. This shows that you can respond to changes in an element’s size, even if they have nothing to do with the viewport. resize-observer-text.html see source font-size The code will usually follow this kind of pattern (taken from resize-observer-border-radius.html): resizeObserver = ResizeObserver( { ( entry entries) { (entry.contentBoxSize) {
      entry.target.style.borderRadius = .min( , (entry.contentBoxSize[ ].inlineSize/ ) +
                                                      (entry.contentBoxSize[ ].blockSize/ )) + ;
    } {
      entry.target.style.borderRadius = .min( , (entry.contentRect.width/ ) +
                                                      (entry.contentRect.height/ )) + ;
    }
  }
});

resizeObserver.observe( .querySelector( )); const new => entries for let of if Math 100 0 10 0 10 'px' else Math 100 10 10 'px' document 'div' Source: Published under Open CC Attribution ShareAlike 3.0 license https://developer.mozilla.org/en-US/docs/Web/API/Resize_Observer_API

Mozilla

Target

Using HTTPS to Render Blocked Mixed Content on a Website

Styling HTML Using CSS: A Beginner's Guide

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

A Quick Introduction to the Resize Observer API

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

An Interview with Seyi Akiwowo, Founder of Glitch - an Organization that Seeks to end Online Abuse

The Noonification: Top 10 CSS Performance Tips (11/14/2022)

100 Stories To Learn About Html5

10 Things You Probably Didn’t Know about Sass

10 Reasons To Use TailwindCSS In Your Next Project

An Interview with Seyi Akiwowo, Founder of Glitch - an Organization that Seeks to end Online Abuse

The Noonification: Top 10 CSS Performance Tips (11/14/2022)

100 Stories To Learn About Html5

10 Things You Probably Didn’t Know about Sass

10 Reasons To Use TailwindCSS In Your Next Project

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps