Study · CSS · Interaction

Placement and scoped transitions

Let fallback placement reshape its detail and keep repeated transition names local.

Positioning and transitions both change what a component needs to show. These experiments let the browser report its placement decision and limit animation snapshots to a local component.

Let fallback placement change the detail

Anchored container queries expose which anchor-positioning fallback the browser selected. Descendant styles can respond to that placement, such as turning the tooltip's pointer toward its anchor.

Anchor
Context follows placementPreferred placementFallback placement

Move the anchor to see its query response.

Feature support is checked when the specimen loads.

Give repeated transitions a local scope

view-transition-scope limits which named elements the browser snapshots. Update the three components: they share a transition name, but each name is scoped to its own component subtree.

Component 1Same transition name
Component 2Same transition name
Component 3Same transition name

Each matching name is scoped to its own subtree.

Feature support is checked when the specimen loads.

Both primitives keep local decisions in CSS: placement can influence a component's detail, and transition capture can stay within that component.