Introduce @container anchored(fallback) to style descendants of anchor positioned elements based on which of position-try-fallbacks is applied. Such queries can be used to e.g. style an anchored element's tether, its animations, etc. based on how the anchor and the anchored element are positioned relative to each other. Example: #anchored { position-try-options: flip-block; container-type: anchored; } @container anchored(fallback: flip-block) { #anchored > .arrow { --arrow-rotation: 180deg; } }
Use cases: - Style a tether like an arrow to match the direction of the anchored element's position relative to its anchor - Styling background gradients based on direction - Run different animations based on the position of the anchored element
Samples: https://codepen.io/una/pen/ZYbzrLg
Explainers: https://github.com/w3c/csswg-drafts/blob/main/css-anchor-position-1/anchored_container_query.md