[css-anchor-position] Ability to provide multiple anchor-elements to try for position-anchor property and other anchor functions

[kizu]

Right now we can provide only one <anchor-element> to the position-anchor property and anchor() functions.

However, multiple anchor features like anchor() and anchor-size() have a fallback argument, which allow us to try multiple anchors in succession like anchor(inside --foo, anchor(inside --bar, anchor(inside --baz))), which allows us to get the first anchor that we can attach to. However, writing it in this way is rather cumbersome.

What if we could:

1. Allow passing <anchor-element> to the position-anchor, so the element will choose the first valid anchor from the list to use as the default one.
2. Allow passing multiple <anchor-element> to the anchor() and anchor-size(), also allowing to simplify the selection of the anchor for these cases.

Open questions:

• Should we use <anchor-element># or <anchor-element>+? anchor() and anchor-size() have a side/size alongside the value plus a fallback after a comma. So if we'd want to allow using multiple anchors, it could look like anchor(inside --foo --bar --baz, 10px). For position-anchor we could probably use commas, but should we be consistent with the anchor functions?
• Thinking a bit more about it: I don't like the --foo --bar --baz, as it is hard to understand that this is a list of fallbacks. First thing I though of is to do something like first-valid(--foo, --bar, --baz), although we probably don't want to have a conflict with [css-values-4] Allow an inline way to do "first value that's supported" #5055, but I wonder if there are other places in CSS where we could have a similar case, where we want to use some reference, and potentially try multiple of them. If so, then having a more general function could be useful.