v133 · css

CSS Scroll State Container Queries

Use container queries to style descendants of containers based on their scroll state.

concepts

  1. Scroll-state Container Queries

    @container scroll-state(stuck/scrolled/snapped: …) for styling based on scroll position relative to a container.

  2. Sticky shrink header

    The explainer's marquee use case: a sticky header that compacts and reveals its Subscribe button on stick — pure CSS, no IntersectionObserver on a sentinel.

  3. Snapped gallery

    The snapped state styles the card currently locked to a scroll-snap point — sharpen, scale up, and badge “in view” without an IntersectionObserver.

  4. Scrolled progress

    The scrolled state appears once reading has begun — pop in a back-to-top button and intensify the sticky-header shadow once the user has actually scrolled.

  5. Sticky Column

    A horizontally-scrollable data table with a position: sticky; left: 0 first column. @container scroll-state(stuck: left) fires the moment the column hits the left viewport edge, adding a drop-shadow and accent border — no IntersectionObserver, no JS scroll listeners. Shows the stuck: left/right/top/bottom value family alongside the classic stuck: top header pattern.

why it shipped

See explainer

references