Description
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 theposition-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, forltr/horizontal-tb
,inline-start block-end
would matchbottom 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.