You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Ok, this could be a bit far-fetched, and mostly inspired by the inherit() proposed in this issue — #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?
The text was updated successfully, but these errors were encountered:
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:
Ok, this could be a bit far-fetched, and mostly inspired by the
inherit()
proposed in this issue — #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?The text was updated successfully, but these errors were encountered: