search

w3c / csswg-drafts

CSS Working Group Editor Drafts
https://drafts.csswg.org/
Other
4.47k stars 659 forks source link

[css-anchor-position-1] Retrieving not just position/dimensions of anchors, but other properties as well #8587

Open kizu opened 1 year ago

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

Ok, this could be a bit far-fetched, and mostly inspired by the inherit() proposed in this issue — https://github.com/w3c/csswg-drafts/issues/2864, but I just need to mention this :)

What if, for absolutely positioned elements, if we could use a certain element as an anchor, we could then get not just its dimensions and position, but also just any other properties we'd want?

One use-case I thought of — adjusting the color/theme of an absolutely-positioned element based on other elements — if we're attaching an element to a bright target, we draw it with a light mode, if it is attached to a dark element — with a dark mode, and so on.

If we're using multiple elements for the base, we could draw a gradient using the backgrounds of multiple elements as different stops.

Dropdowns could adapt to the target's fonts, elements could adapt to other elements' opacity, visibility etc.

Of course, there'd be some limitations, especially if we'd allow getting the value of CSS variables, but for getting some regular properties via something like anchor-property(background-color) or whatever this maybe could work?

tabatkins commented 6 months ago

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