Skip to content

[css-anchor-position-2] Add a fallback feature for querying applied fallback for anchored elements #12391

Open
@lilles

Description

@lilles

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:

@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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions