[css-anchor-position-2] Add `any` keyword support to `anchored(fallback)` container queries

[lilles]

When we discussed adding anchored(fallback) container queries for anchored elements, there was a proposal to add an any keyword to allow matching only one of the axes when matching position-areas.

For instance, @container anchored(fallback: left any) would match position-area: left top, position-area: left span-bottom, etc.

@fantasai @kizu

[lilles]

A concrete proposal:

• Introduce a new <position-area-query> which is <position-area> extended with an ambiguous any keyword for each alternative production:

<position-area-query> = [
       [ left | center | right | span-left | span-right
       | x-start | x-end | span-x-start | span-x-end
       | x-self-start | x-self-end | span-x-self-start | span-x-self-end
       | span-all | any ]
       ||
       [ top | center | bottom | span-top | span-bottom
       | y-start | y-end | span-y-start | span-y-end
       | y-self-start | y-self-end | span-y-self-start | span-y-self-end
       | span-all | any ]
|
       [ block-start | center | block-end | span-block-start | span-block-end | span-all | any ]
       ||
       [ inline-start | center | inline-end | span-inline-start | span-inline-end
       | span-all | any ]
|
       [ self-block-start | center | self-block-end | span-self-block-start
       | span-self-block-end | span-all | any ]
       ||
       [ self-inline-start | center | self-inline-end | span-self-inline-start
       | span-self-inline-end | span-all | any ]
|
       [ start | center | end | span-start | span-end | span-all | any ]{1,2}
|
       [ self-start | center | self-end | span-self-start | span-self-end | span-all | any ]{1,2}
]

• Since any is ambiguous, any is the same as any any.
• any matches any <position-area> value for its resolved axis (resolved as other ambiguous values like center).
• Replace <position-area> with <position-area-query> in https://drafts.csswg.org/css-anchor-position-2/#anchored

[nt1m]

I feel like anchored(fallback: left) is more natural than anchored(fallback: left any) for that use case

[lilles]

I feel like anchored(fallback: left) is more natural than anchored(fallback: left any) for that use case

What about center? Would that be center center (how position-area expands) or center any?

For the latter, querying:

anchored(fallback: center)

would match both of:

position-try-fallbacks: center left, center

To match only the second fallback you would need to query:

anchored(fallback: center center)

So, perhaps for single value queries, the second is any if the single value is unambiguous, otherwise it's repeated as for position-area?

[fantasai]

Yes, I think if we go with Tim's proposal, we could:

• For unambiguous tracks, set an omitted track to any instead of span-all.
• For ambiguous tracks:
  - Option A: duplicate the keyword as usual
  - Option B: make it match both orderings with any, e.g. center = any center or center any.

I suspect Option A will be less surprising.

[lilles]

Yes, I think if we go with Tim's proposal, we could:

• For unambiguous tracks, set an omitted track to any instead of span-all.
• For ambiguous tracks:
  • Option A: duplicate the keyword as usual
  • Option B: make it match both orderings with any, e.g. center = any center or center any.

I suspect Option A will be less surprising.

+1 to option A

[css-meeting-bot]

The CSS Working Group just discussed [css-anchor-position-2] Add `any` keyword support to `anchored(fallback)` container queries, and agreed to the following:

• RESOLVED: 'any' keyword is allowed wherever 'span-all' is allowed, and omitted values that would default to 'span-all' default to 'any' for queries.

The full IRC log of that discussion

<TabAtkins> fantasai: discussion about anchored() query for anchor-pos-2, where you can ask which area it's anchored in
<TabAtkins> fantasai: proposal was to add an 'any' keyword, combinable in the same way span-all is combinable, so you can query "I want to check if it's on the left, in any track"
<TabAtkins> fantasai: Tim brought up that if you omit the keyword from an axis, it would make more sense to default it to 'any' in queries, rather than span-all like in the property
<TabAtkins> fantasai: so proposal is that a duplicated keyword is duplicated as normal, but if it would instead default to span-all in the property, it defaults to 'any' in the query
<TabAtkins> +1
<fantasai> TabAtkins: Sounds good. Tim's argument makes sense.
<fantasai> PROPOSED: 'any' keyword is allowed wherever 'span-all' is allowed, and omitted values that would default to 'span-all' default to 'any' for queries.
<futhark> q+
<TabAtkins> futhark: is it possible to ask for fpwd for anchor-pos-2 once this is in?
<TabAtkins> astearns: let's get this in first
<TabAtkins> astearns: objections?
<fantasai> RESOLVED: 'any' keyword is allowed wherever 'span-all' is allowed, and omitted values that would default to 'span-all' default to 'any' for queries.
<astearns> ack futhark
<TabAtkins> fantasai: I'd like a week to review the new spec before fpwd
<TabAtkins> astearns: Rune, could you add a comment to #6900 to ask for publication next week?