Container scroll-state queries
Container scroll-state queries with the @container scroll-state(...) at-rule apply styles to an element based on the sticky positioning, snapped, and scrollable state of the container.
Overview
Container scroll-state queries with the @container scroll-state(...) at-rule apply styles to an element based on the sticky positioning, snapped, and scrollable state of the container.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
css.at-rules.container.scroll-state_queries Experimental | 133 | 133 | | | 133 | |
| CSS at-rule | ||||||
scroll-state queries.scrollable Experimental | 133 | 133 | | | 133 | |
scroll-state queries.snapped Experimental | 133 | 133 | | | 133 | |
scroll-state queries.stuck Experimental | 133 | 133 | | | 133 | |
| CSS property | ||||||
scroll-state Experimental | 133 | 133 | | | 133 | |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Syntax
CSS
.header {
position: sticky;
top: 0;
container-type: scroll-state;
}
@container scroll-state(stuck: top) {
.header { box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
}Live demo
Use cases
Component layout
Use Container scroll-state queries to create more predictable spacing and placement inside reusable UI patterns.
Responsive structure
Adapt containers and flow rules so layouts stay stable across viewport changes.
Cautions
- Test layout rules with real content, long labels, and small screens before depending on them broadly.
- Prefer simpler layout primitives if they already solve the problem clearly.
Accessibility
- Layout choices should preserve reading order and support zoom without clipping.
- Avoid visually clever positioning that makes content harder to follow with keyboard or assistive tools.
Related links
Powered by web-features