Bram.us – Page 6 – A rather geeky/technical weblog, est. 2001, by Bramus

Solved by `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.

CSS `@function` + CSS `if()` = 🤯

Support for Nested Container Queries and the CSS if() function inside CSS Custom Functions make @function very powerful.

CSS Custom Functions are coming … and they are going to be a game changer!

Chrome is currently prototyping CSS Functions, which is very exciting!

View Transitions Applied: More performant `::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.

View Transitions Snippets: Keeping the page interactive while a View Transition is running

The ::view-transition root overlay captures all clicks … but you can undo that.

MPA View Transitions Deep Dive

Back in December I joined Kevin J Powell on his channel to talk about Cross-Document View Transitions

CSS `attr()` gets an upgrade

You can now use `attr()` with any CSS property — not just content – and it can parse values into data types other than <string>.

Move elements around the DOM while preserving their state with `moveBefore`

Unlike the classic way of moving a node by removing+reinserting it, the moveBefore method preserves the element’s state!

View Transitions Snippets: Keeping track of the old and new positions of a transitioned element

By calling getBoundingClientRect before and after the snaphots are taken, you can get the before and after positions of the transtioned elements.

View Transitions Snippets: Getting all Animations linked to a View Transition

A few lines of JavaScript to get all animations linked to an active View Transition.