Back to all features
Open for signals
Container queries
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.
Modern Web Guidance
How Modern Web Guidance uses this feature
Styles sticky headers, pinned elements, and scrollable container children based on their active scroll state using container scroll-state queries.
Recommended fallback strategy
For browsers lacking @container scroll-state() support, use IntersectionObserver with sticky sentinel elements or scroll position listeners to toggle active styling classes.
Community use cases (2)
Community signal summary
Developers strongly favor native support for
container-scroll-state-queriesto dynamically alter UI elements—such as navigation components [1] and overflow fade indicators [2]—based on container scroll positions. A primary key use case involves automatically displaying visual fade cues on scrollable tab lists when content exceeds container bounds [2]. Without a native CSS mechanism, managing scroll states across dynamically switching containers introduces significant architectural friction and state synchronization overhead [1].To handle scroll-dependent styling today, developers rely on heavy JavaScript workarounds, pairing
ResizeObserverorIntersectionObserverinstances with manualscrollWidthcalculations to evaluate container overflow [2]. An engineer at Automattic highlighted that these script-driven layout calculations cause persistent bugs and high maintenance costs when building robust design system components [2]. Additionally, manually tracking state transitions across dynamic DOM containers quickly becomes cumbersome [1]. Overall developer sentiment is strongly positive, with engineers eager to replace brittle JavaScript observers and layout-thrashing calculations with declarative, performant CSScontainer-scroll-state-queries[1][2].Generated by AI from community comments and may contain inaccuracies. Read the comments below for full developer context.
This summary covers all 2 comments, is up to date, and was last updated on September 5, 2026.
What I want to do with this feature
Being able to adjust nav via this feature would avoid needing to use js to detect particular container scroll states.
What I'm having to do in the meantime
Use js to detect scroll states for different containers. Starts to become fairly cumbersome with dynamic switching of containers and such.
What I want to do with this feature
Show fade indicator when a list of tabs in the WordPress Tabs component does not fit within the container:
<img width="660" height="147" alt="Image" src="https://github.com/user-attachments/assets/bc21465f-a163-4bf4-8f1e-907304087d15" />What I'm having to do in the meantime
Complicated
ResizeObserverorIntersectionObservertracking andscrollWidthcalculations to measure overflow, causing all sorts of bugs (fixing attempt example https://github.com/WordPress/gutenberg/pull/79856)