Tuesday, 21 May, 2019 UTC
Summary
Creating websites that are reactive and responsive used to be considered advanced but responsiveness is a necessity for successful websites and apps. We’ve added media queries,
Using matchMedia, and a host of other APIs to help developers make responsiveness easier and now we get a new one: ResizeObserver. With the Resize Observer API, we can watch for resizing on individual elements!ResizeObserver
To listen for resize changes on elements, create a
ResizeObserver instance and call observe, passing an element:const observer = new ResizeObserver(entries => {
for (let entry of entries) {
// Now do something with the resized element
if (entry.contentRect.width < 1000) {
// Stop making AJAX calls for content...
}
}
});
observer.observe(document.querySelector('div'));
An
entry provides you a target element as well as its dimensions and positioning:entry = {
target: div, // The element passed to `observe`
contentRect: {
bottom: 88,
height: 88,
left: 0,
right: 1043,
top: 0,
width: 1043,
x: 0,
y: 0
}
}
Media queries and
matchMedia provide an opportunity to adjust display via CSS but not functionality, which is where ResizeObserver fits in.Years ago I created a hack for spying on elements using CSS, media queries, and
:before, but it required polling via JavaScript to work properly. Having a legit, optimized JavaScript API to accomplish the same is refreshing and desperately needed!The post Resize Observer appeared first on David Walsh Blog.