[csswg-drafts] [css-anchor-1] Using anchor offsets/dimensions for properties other than inset/sizes (#8586)

kizu has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-anchor-1] Using anchor offsets/dimensions for properties other than inset/sizes ==
<details>
<summary>Disclaimer and additional links</summary>

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](https://drafts.csswg.org/css-anchor-position-1/)
- [my article with the experiments](https://kizu.dev/anchor-positioning-experiments/)
</details>

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.


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8586 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 15 March 2023 12:31:48 UTC