Limited support Useful when Container scroll-state queries helps structure space, flow, or sizing without relying on brittle manual adjustments.

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.

Layout

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

stuck: top

CSS Stuck: top demo.

PreviewFullscreen

snapped

CSS Snapped demo.

PreviewFullscreen

scrollable

CSS Scrollable demo.

PreviewFullscreen

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