Observing Rendered DOM Nodes

Sam Thorogood has been looking into all kinds of changes that can happen to DOM Nodes: This post will explain how to be notified when: an element is added or removed from the DOM the bounding box of an element changes (i.e., resizes) an element moves around the page for any reason Expect some ResizeObserver, …

content-visiblity: auto; vs. jumpy scrollbars, a solution

As warned in content-visibility: the new CSS property that boosts your rendering performance you need to be careful with applying content-visibility: auto; on each and every element as the scrollbar might get jumpy. This is because elements will be rendered as they scroll into the viewport and will be hidden as they scroll out of …

Container Queries with the <watched-box> Custom Element

Heydon Pickering has created <watched-box>: I wanted a simple, declarative container queries solution, and here it is: ❤ Custom Element + ResizeObserver 🥣 Use and mix together any CSS length units 🖼 Orientation supported 🧚‍♀️ ≅1.5KB minified Once imported you can use it as follows: <watched-box widthBreaks="70ch, 900px" heightBreaks="50vh, 60em"> <!– HTML and text stuff …