demo · v143

Fallback Container Query

Move the anchor around inside its container. As the popover would flip between fallback positions, descendants restyle via @container anchored(--name). Here the popover changes colour to match the chosen fallback.

Checking anchored container query support…
anchor
popover — bottom
position-try fallback selected:
--bottom
@container anchored(...) matches:
anchored(--bottom)

The popover declares the real v143 CSS path: container-type: anchored, position-try-options, and @container anchored(--name) rules. When support is missing, the slider simulation keeps the same fallback names visible so the CSS mapping is still inspectable.

the call

.tooltip {
  position: absolute;
  position-anchor: --my-anchor;
  position-try-options: --above, --beside;
  container-type: anchored;
}

/* New in v143: style descendants based on which fallback applied */
@container anchored(--above) {
  .arrow { transform: rotate(180deg); }
}
@container anchored(--beside) {
  .arrow { transform: rotate(90deg); }
}
/* Canonical flip shorthand from ChromeStatus */
.tooltip {
  position-anchor: --target;
  position-try-options: flip-block;
  container-type: anchored;
}

@container anchored(fallback: flip-block) {
  .tooltip-content { border-color: var(--accent-blue); }
}

see also