v143 · css

CSS Anchored Fallback Container Queries

Introduce @container anchored(fallback) to style descendants of anchor positioned elements based on which of position-try-fallbacks is applied.

concepts

  1. Fallback Container Query

    Interactive anchor-positioning sim: move the anchor and watch the popover restyle as the chosen fallback changes via @container anchored(--name).

  2. Arrow flip

    The spec's lead use case: a tooltip arrow that rotates to point at the anchor depending on which fallback was chosen — done purely in CSS.

  3. Menu edge fitter

    Drag a trigger anywhere; the popover picks an anchor fallback (below / above / right / left). Each fallback exposes a different inline size, and the menu's container query collapses or expands the layout to match.

  4. Overflow-Aware Tooltip

    A scrollable container with five anchor buttons positioned at all edges and the center, each with a CSS-anchor-positioned tooltip using anchor-name, @position-try fallback blocks, and position-try-order: most-block-size. Width and height sliders resize the container live so tooltips visibly flip sides, and a "Fallback highlight" toggle marks the active position.

why it shipped

Use cases:

references