Chrome 150 · CSS

Type that

fits itself

The moment text-fit lands, every headline here measures its own container and falls flush to the pixel — no measuring loop, no resize observer, no library. It hasn't landed yet. Chrome's 150 release notes announced it; we tested 151 and it is not enabled under any value or longhand, so what you're reading right now is the clamp() fallback. The readout near the bottom tells you exactly which features your browser really has. Either way, not one line of JavaScript runs on this page.

01 · text-fit

Four lines. One measure.

Four sentences of completely different lengths, every one filling the same column edge to edge. Getting this in 2025 meant shipping FitText or writing a measure-and-resize loop that fought every reflow. Now it's one declaration: text-fit: per-line.

Short.

A middling line here.

Considerably longer than the one above it.

And this one runs longer still, to prove the point.

Without text-fit those lines are sized by a fluid clamp() and allowed to wrap — reasonable, never flush. That gap is the whole feature.

> measured 2026-07-27, Chrome for Testing 151.0.7922.34
[text-fit] CSS.supports → false for consistent · per-line · scale · auto
[text-grow] false  ·  [text-shrink] false  — the longhands aren't there either
[border-area] true  ·  [flex-wrap:balance] true  ·  [zoom] true
[polygon round] false — announced, not yet enabled
[NOTE] Chrome's 150 release notes listed text-fit. It is not enabled in 151.
                 This page ships the real declaration anyway and degrades — the day it flips on, it just works.
02 · background-clip: border-area

Gradient borders, honestly

A gradient on a border used to mean a pseudo-element sandwich, a mask, or a padding-box hack that broke the moment you added a border radius. border-area paints the border box directly.

01

No pseudo-element

The gradient is the border, not a shape stacked behind one. Radius, dashes and widths all behave normally.

02

No mask

Nothing to keep in sync when the card resizes, and no compositing cost from an extra layer.

03

Degrades cleanly

Without support you get a flat one-colour border. Nothing collapses; it just looks plainer.

03 · polygon() … round
Clip paths finally get corner radii. A polygon can now be cut with soft corners in the same declaration that defines its points — no SVG filter, no second element. polygon(0 12%, 4% 0, 100% 0 … round 18px)
04 · scroll-driven kinetic type

Everyletterhererisesonscroll.

Staggered by nothing but a different animation-range per child. No SplitText, no timeline, no observer — the scroll position is the timeline, and the compositor drives it off the main thread.

05 · animatable zoom

Zoom interpolates now

Hover or tab onto a tile. zoom is animatable in Chrome 150 — unlike transform: scale(), it reflows layout as it grows, so text stays crisp at every step instead of being resampled.

0script tags
0requests out
0dependencies
1html file
06 · live capability readout

What your browser is actually drawing

Detected with @supports — which means this readout itself needs no JavaScript. If a row says FALLBACK, you're looking at the degraded version of that section, and now you know which.

LiveFallback text-fitHeadlines fit their box exactly. Fallback: fluid clamp() sizing.
LiveFallback background-clip: border-areaGradient card borders. Fallback: flat single-colour border.
LiveFallback polygon() with roundCut pull-quote with soft corners. Fallback: plain bordered block.
LiveFallback animation-timeline: view()Scroll-driven reveals and kinetic rows. Fallback: everything static and readable.
LiveFallback flex-wrap: balanceCard rows distribute evenly. Fallback: ordinary wrap.
LiveFallback animatable zoomTiles grow with layout reflow. Fallback: instant, un-eased jump.
07 · receipt

Verify it yourself

> source verification
[GREP] grep -c "<script" index.html → 1 (JSON-LD metadata only — no executable code)
[RUNTIME] 0 lines of JavaScript execute on this page
[CSS] text-fit · background-clip:border-area · polygon(… round) · zoom · flex-wrap:balance
[MOTION] animation-timeline: scroll(root) + view() — compositor-driven, off main thread
[NETWORK] 0 outbound requests · no CDN, no webfont, no analytics · works offline
[A11Y] prefers-reduced-motion honoured · all decorative rows aria-hidden
[SUPPORT] border-area · flex-wrap:balance · animatable zoom → verified live in Chrome 151
[PENDING] text-fit and rounded polygon() → announced for 150, NOT enabled in 151 (measured)
Back to the Labs →