v138 · 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

    Container queries learn the same fallback chain mechanics as @supports.

  2. Tooltip edge cases

    A scrollable canvas of pills. Each tooltip’s headline rewrites itself to say where the layout engine ended up putting it — below / above / beside — via @container anchored(…).

  3. Menu chevron flip

    Dropdown menu where the chevron rotation and popover colour update automatically based on which position-try-fallbacks entry the engine settled on — default, flip-block, flip-inline, or the corner combination. Pure CSS, no getBoundingClientRect().

  4. Popover position lab

    Drag the anchor point into any corner of the sandbox. position-try-fallbacks repositions the popover to stay on screen, while @container anchored(fallback) rewrites its colour and label to reflect which fallback the engine picked — entirely in CSS.

  5. Callout Arrow

    A speech bubble whose arrow flips direction automatically: @container anchored(flip-block) rotates the arrow to point down when the callout is above, anchored(flip-inline) rotates it sideways when it moves right. Drag the anchor button into any corner and watch arrow direction, border colour, and the indicator update with no JavaScript.

why it shipped

Use cases:

references