kizu

Weirdly enough, with the new scroll-driven animations spec (the spec’s terminology), you can do all sorts of position-based styling without any actual scrolling taking place[1]. Of course you can also use it for its intended purpose of actually detecting scroll position.

But this also unlocks a lot of other style query problems, like the cursed wrap detection. For some cases, container queries should also be sufficient. And contrary to many of the other responses here, yes I think this flexibility is important progress. There are tons of fairly straightforward (even trivially specified) layout techniques that are currently next to impossible without some combination of hardcoding measurements and/or JS, which are going to become reasonably achievable in the next year or two. That’s fantastic. And for everyone who complains about this complexity at the styling level, it’ll eventually eliminate the need for a whole class of runtime JS doing a whole bunch of inefficient calculations badly.

1: https://kizu.dev/position-driven-styles/

The article I linked goes into the details, but basically a relative approach constrains your markup: The positioned thing must be a child of the relatively positioned anchor or a wrapper element, and you often cannot sensibly position it without using JS to check the location of the anchor. E.g. a popover menu for a button must check if the button is close to an edge of the viewport and position the menu element appropriately. Anchor positioning will do this automatically.

Also, if support for multiple anchors is included, then it opens up some very interesting capabilities to do things like draw arbitrary diagram connectors between elements: https://kizu.dev/anchor-positioning-experiments/

Not by themselves, at least today, as we can't currently modify the value of a custom property by using itself in the calculation. But in the future we will have an `inherit()` functional notation that will unlock this (and at least Chrome implemented it in Canary already — https://blog.kizu.dev/play-with-inherit-function/).

It is possible to use style queries and some hacks (https://kizu.dev/self-modifying-variables/) to achieve this today, but that doesn't bring this closer to production, as Firefox still does not support them (but will be soon).