[csswg-drafts] [css-anchor-position-2] Add a `fallback` feature for querying applied fallback for anchored elements (#12391)

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

== [css-anchor-position-2] Add a `fallback` feature for querying applied fallback for anchored elements ==
Issue #8171 there is a proposal to introduce a way of querying the applied position-try-fallback for anchored elements.

Issue #12390 proposes a new `anchored` `container-type` along with a new `anchored()` query function.

## Proposal

Introduce a `fallback` feature for the `anchored()` function proposed in #12390 which takes a single fallback value from `position-try-fallbacks`. `none` would match if no fallbacks are applied, otherwise the values are compared taking writing-direction into account for.

- `none` - matches if none of the `position-try-fallbacks` are applied.
- `<position-area>` - matches if the values refer to the same area with writing-direction of the anchor and anchored elements taken into account. That is, for `ltr/horizontal-tb`, `inline-start block-end` would match `bottom left`, for instance.
- `<dashed-ident> || <try-tactic>` - matches if both the name and the tactics match. That is, `--foo` will not match`--foo flip-inline`.


Example:

```css
@position-try --foo {
  position-area: bottom center;
}

#anchored {
  position: absolute;
  position-area: left;
  position-try-fallbacks: --foo;
  container-type: anchored;
}

@container anchored(fallback: --foo) {
  #anchored-child { background-color: teal; }
}
```

The `anchored()` syntax supports the same logical combinations and parentheses expressions as `scroll-state()` and `style()` do.

### Tree-scoped names and references

Names for `@position-try` rules in `position-try-fallbacks` are tree-scoped names. There is a question whether such names used in query values should carry the tree-scope of the `@container` rule and affect matching with such names from `position-try-fallbacks` based on tree-scope, or simply by name. And if so, in which cases names from different tree-scopes should match.

@fantasai 


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


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

Received on Tuesday, 24 June 2025 15:09:34 UTC