CSS · v149
Scroll State Queries
Style sticky, snapped, and scrollable elements without a single scroll listener. The browser exposes its own state tracking.
v149 · CSS
In a card grid, padding-top on each card is supposed to give consistent top spacing. But heading text carries invisible leading above the cap height — so the visual gap above the text is always larger than the padding value says. text-box: trim-both cap alphabetic removes that invisible space, making the padding you write match the gap the user sees.
Without text-box
Yellow background starts at the top of the em square — above the cap height. The visual content (letters) starts lower.
With text-box
Yellow background starts exactly at the cap height. text-box: trim-both cap alphabetic
CSS · v149
Style sticky, snapped, and scrollable elements without a single scroll listener. The browser exposes its own state tracking.
JavaScript · v149
Six new methods eliminate the atob/btoa dance. Native binary-to-text encoding, finally.
CSS · v149
Draw lines inside grid and flexbox gaps using column-rule and row-rule — no extra elements needed.
CSS · v149
The longest-awaited typographic primitive. Cap height and alphabetic baseline are now addressable from CSS.
CSS · v149
Pixel art, scaled up without blur. The nearest-neighbour algorithm preserves every edge.
Performance · v149
Pages with live WebSocket connections can now enter back/forward cache. The browser closes the socket on entry.
/* On a card's heading: trim invisible leading above cap-height */
.card-heading {
text-box: trim-both cap alphabetic;
}
/* Without this, the "cap height" of the first line is offset
downward by about (line-height - 1em) / 2 worth of space.
With it, the heading's content box starts exactly at the cap. */
Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗