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
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:
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.
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.
The text was updated successfully, but these errors were encountered:
Right now we can provide only one
<anchor-element>
to theposition-anchor
property andanchor()
functions.However, multiple anchor features like
anchor()
andanchor-size()
have a fallback argument, which allow us to try multiple anchors in succession likeanchor(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:
<anchor-element>
to theposition-anchor
, so the element will choose the first valid anchor from the list to use as the default one.<anchor-element>
to theanchor()
andanchor-size()
, also allowing to simplify the selection of the anchor for these cases.Open questions:
<anchor-element>#
or<anchor-element>+
?anchor()
andanchor-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 likeanchor(inside --foo --bar --baz, 10px)
. Forposition-anchor
we could probably use commas, but should we be consistent with theanchor
functions?--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 likefirst-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.The text was updated successfully, but these errors were encountered: