v149 · CSS

Snap Carousel

Scroll the carousel below. The snapped card expands its text, scales up, and flips to inverted colours — using only @container scroll-state(snapped: x). No JavaScript tracks the active index.

Feature detection: checking…

01 / 06

Container Queries Land in CSS

The original @container queries respond to an element's own size, enabling truly component-driven responsive design for the first time.

CSS

02 / 06

Style Queries and Their Power

Style container queries let you query a parent's computed CSS custom property value — unlocking data-driven theming without JavaScript.

CSS

03 / 06

Scroll State Queries (You Are Here)

Scroll state container queries expose three live conditions: stuck (for sticky), snapped (for snap targets), and scrollable (for overflow). No scroll listeners needed.

CSS · v149

04 / 06

Gap Decorations Arrive

column-rule and row-rule now draw lines inside grid and flex gaps — no borders, no pseudo-elements, no layout impact.

CSS · v149

05 / 06

CSS text-box Trims Leading

The text-box property removes the invisible space that line-height adds above cap height and below the baseline, making optical alignment finally achievable in CSS alone.

CSS · v149

06 / 06

What's Next in CSS

Anchor positioning, @starting-style, and CSS Nesting updates are all heading to stable soon. The platform is moving faster than ever.

CSS

← drag or scroll to snap between slides →

/* Each slide is its own scroll-state container */
.slide {
  container-type: scroll-state;
  container-name: slide;
  scroll-snap-align: center;
}

/* Base (not snapped) — scaled down, no excerpt */
.slide-inner {
  transform: scale(0.93);
  transition: transform 0.3s, background 0.3s;
}
.slide-excerpt {
  max-height: 0;
  opacity: 0;
  transition: max-height 0.4s, opacity 0.3s;
}

/* Snapped — expands, inverts, scales up */
@container slide scroll-state(snapped: x) {
  .slide-inner {
    transform: scale(1);
    background: var(--text-black);
  }
  .slide-excerpt {
    max-height: 6rem;
    opacity: 1;
    color: var(--bg-stone);
  }
}

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗