[css-anchor-position-1] Using anchor offsets/dimensions for properties apart from inset/sizes

[kizu]

Disclaimer and additional links

I'm submitting my feedback following my experiments with the current implementation of anchor positioning in Chrome Canary.

I wrote an article about my experiments, but decided to fill most of my feedback as separate issues here.

A quick summary of related links:

• anchor positioning specs
• my article with the experiments

In some of my experiments I wanted to use the anchor positions or anchor sizes for properties other than top/left/right/bottom/width/height.

Main experiments that could benefit from this are the ones that draw the connectors between two elements (examples later in this section — https://kizu.dev/anchor-positioning-experiments/#the-technique-itself) — ability to use the diff between two anchor's positions would result in ability to calculate the angle between them, leading to a lot of potential in terms of possible decorative things we could do with them.

In my experiments I ended up just using SVG, as it kinda supports doing that kind of directional stuff, but I can imagine a lot of other possible appliances for using anchor values not just for positioning the element & setting its dimensions — background-size, background-position, gradient stops, transform, maybe some other properties — all of them could benefit from an ability to retrieve the anchor's values.

Possible cases: drawing shadows, reflections, glares based on other elements' positions, for example. Currently this could be kinda done by using elements for each such decorative item, but sometimes it could be much more effective to use multiple backgrounds, and use separate layers for separate elements.

[kizu]

I would want to copy one use-case from the anchoring to the cursor issue (#8639) here, as if we could use it for background-position or other properties, this would unlock a lot of things for which developers currently have to use JS to assign the mouse coordinates.

• A hover/focus state that follows the pointer/focus. There are probably hundreds of examples of this, where people are implementing something like this by either adding js that assigns a local x and y coordinates for a button to show a shiny gradient, like in this example by @LeaVerou — https://codepen.io/leaverou/pen/qBEYGeq —  though this would require us to use the anchor values not just for the inset properties or dimensions, but for things like background-position.

[kizu]

I did recently play a bit with the transforms, as well as with this hack for working around the absence of the ability to strip units from the calculations.

It would be really nice to add at least the anchor-size to the transform properties (all of them), as this would allow doing things like positioning an element rotated between some elements, and many other interesting things. And, adding anchor-size to the transform should be safe enough, as using any anchor's value, there should not have any impact on anything else.

This would also unlock an ability to use more dimensions in the transform aside from its element via % — this can be very powerful. I recently wanted to use both the element's dimensions, and its parent's for this, and ended up using container query length units, but it would be awesome to allow this for non-container cases as well (siblings, etc).

[tabatkins]

(Retagging to level 2, this is a substantial additional feature to discuss.)