A rather geeky/technical weblog, est. 2001, by Bramus
StyleObserver: Element.matchContainer()
Martin Winkler published a package that polyfills Element.matchContainer to get notified in script when a Container Query matches/unmatches. Under the hood, it uses a StyleObserver.
@function + CSS if() = 🤯
Support for Nested Container Queries and the CSS if() function inside CSS Custom Functions make @function very powerful.
::view-transition-group(*) animations
If the dimensions of the ::view-transition-group(*) don’t change between the old and new snapshot you can optimize its keyframes so that it animates on the compositor.
moveBefore
Unlike the classic way of moving a node by removing+reinserting it, the moveBefore method preserves the element’s state!
By calling getBoundingClientRect before and after the snaphots are taken, you can get the before and after positions of the transtioned elements.
Tricking a MutationObserver into observing changes to IDL attributes by syncing the IDL attributes to their Content Attribute counterparts.
Talk on animating the <details> element with transition-behavior: allow-discrete , interpolate-size: allow-keywords, and ::details-content.
