demo · v138
Fallback Container Query
Move the black anchor around the frame. The popover repositions to stay inside, and the descendant text style swaps based on which @position-try fallback ended up applied — via @container anchored(--name).
checking support…
anchor
Popover
the code
.popover {
position-anchor: --btn;
position-try-fallbacks: --flip-top, --flip-left;
container-type: anchored; /* NEW: makes this a "anchored container" */
}
@container anchored(--flip-top) {
.label::before { content: "fallback: above"; }
}
see also
- CSS Anchored Fallback Container Queries — feature index
- ChromeStatus entry
- Spec