Anchor position container queries
Anchor position container queries with the @container anchored(fallback: …) at-rule apply styles to an element based on the element's anchor position.
Overview
Anchor position container queries with the @container anchored(fallback: …) at-rule apply styles to an element based on the element's anchor position.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
css.at-rules.container.anchor_position_queries Experimental | 143 | 143 | | | 143 | |
| CSS at-rule | ||||||
anchor position queries.fallback Experimental `fallback` feature | 143 | 143 | | | 143 | |
anchor position queries.fallback.any value Experimental `any` query value | 143 | 143 | | | 143 | |
| CSS property | ||||||
anchored Experimental | 143 | 143 | | | 143 | |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Syntax
CSS
.tooltip {
position: absolute;
position-anchor: --trigger;
}
@container anchored(fallback: bottom) {
.tooltip::before { transform: rotate(180deg); }
}Live demo
Use cases
Browser-native behavior
Use Anchor position container queries to rely on the platform for behavior that would otherwise require extra code or CSS complexity.
Progressive enhancement
Enhance the experience where support exists while keeping a solid baseline elsewhere.
Cautions
- Check browser support and actual product need before adding a new platform feature widely.
- Keep feature usage understandable so future contributors know why it was chosen.
Accessibility
- New platform features should still preserve readable defaults and robust interaction patterns.
- Verify that enhancement paths do not leave unsupported environments with a broken experience.
Related links
Powered by web-features