v149 · CSS

Vertical Story Snap

Scroll the story reader below. Each card uses @container scroll-state(snapped: y) — the currently snapped card brightens, reveals its text, and shows interaction controls. Non-snapped cards are dimmed. No JavaScript involvement in the visual state.

Feature detection: checking…

01 / 05 · CSS

Container Queries: The Full Arc

Size, style, and now scroll state — the CSS containment model has grown from a layout primitive into a complete reactive programming model for the presentation layer. Understanding containment is now table stakes for any CSS architect.

CSS · v149
↓ scroll for next

02 / 05 · JavaScript

Uint8Array Gets Base64 and Hex

Six new methods on Uint8Array eliminate the atob/btoa dance for binary-to-text encoding. toBase64(), fromBase64(), toHex(), fromHex(), setFromBase64(), and setFromHex() are now first-class platform APIs, part of ECMAScript 2026.

JS · v149
↓ scroll for next

03 / 05 · CSS

CSS Gap Decorations Fill the Grid

The column-rule and row-rule properties, long available in multi-column layout, now work in grid and flexbox. Draw lines between tracks with a single declaration — no extra elements, no pseudo-elements, no margin tricks required.

CSS · v149
↓ scroll for next

04 / 05 · CSS

text-box Trims Invisible Space

Every line of text carries invisible padding above the cap-height and below the baseline — an artefact of how fonts define their metrics. The text-box property trims that space, making typographic alignment in CSS finally match the designer's intent.

CSS · v149
↓ scroll for next

05 / 05 · CSS

image-rendering: crisp-edges Arrives

Pixel art, retro sprites, and low-resolution data visualisations finally have a reliable way to scale up without blurring. The crisp-edges value preserves high-contrast edges using a nearest-neighbour algorithm, aligning Chrome with Firefox and Safari.

CSS · v149
↓ you've seen them all 
/* Each story is a vertical scroll-state container */
.story {
  container-type: scroll-state;
  container-name: story;
  scroll-snap-align: start;
  height: 68vh;
}

/* Non-snapped: dimmed and body text hidden */
.story-inner { opacity: 0.4; filter: brightness(0.7); }
.story-body  { max-height: 0; opacity: 0; }
.story-controls { opacity: 0; transform: translateY(8px); }

/* snapped: y — currently visible card */
@container story scroll-state(snapped: y) {
  .story-inner  { opacity: 1; filter: brightness(1); }
  .story-body   { max-height: 8rem; opacity: 1; }
  .story-controls { opacity: 1; transform: translateY(0); }
}

see also

implementation reference

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