[csswg-drafts] [css-anchor-position] Allow multiple names in position-anchor, for fallback (#12576)

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

== [css-anchor-position] Allow multiple names in position-anchor, for fallback ==
Currently, `position-anchor` takes only a single anchor reference, which is used by several features (`position-area`, an unspecified reference in `anchor()`, etc).

However, there are good use-cases to want to do fallback between anchors, using one if it exists, and using another if it doesn't. For example, [this use-case written by Una](https://codepen.io/TabAtkins/pen/empWxKQ) has the outline track the currently-hovered element if it exists (from a `:hover` rule setting a `--hovered` anchor name), and otherwise uses the currently-selected element (from a `.selected` class setting a `--selected` anchor name).

You *must* use  separate anchor names + fallback for this example; if you try to use only a single anchor name, it will appear to "work" when you hover things *after* the selected element (because we take the last valid anchor in DOM order), but will never anchor against things that are *before* the selected element in DOM order.

This is a bit awkward to write today, as it means you have to repeat yourself a lot in the styles, and don't get to rely on `position-anchor` setting the default so you can omit the anchor name. It also simply *will not work* for `position-area`  and similar features that *depend* on `position-anchor`; you'd have to do some awkward `:has(button:hover)` rules to instead manually swap between `position-anchor: --hovered;` and `position-anchor: --selected;`.

--------

So, I propose that `position-anchor` extends its grammar to a comma-separated list of values, and just uses the first anchor reference that successfully resolves. So the example I linked above could just use `position-anchor: --hovered, --selected;`, and then all the `anchor()` and `anchor-size()` references could just omit the anchor reference and wouldn't need fallback at all.

(This does somewhat break the correspondence between `position-anchor: X; top: anchor(top);` and `top: anchor(X top);`, but I'm okay with that since you can just desugar in a slightly more verbose way using fallback.)

/cc @una 

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


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

Received on Tuesday, 5 August 2025 18:16:32 UTC