text-wrap: pretty
Limited availability11 of 24 ship it · none guard it
Arc, Clerk, Cursor, Electronic Materials Office, Linear, Lynn Fisher, Mr.Day, Raycast and 3 more
Modern CSS · measured
The Ship Gap
Browser data tells you when a CSS feature became safe. It cannot tell you whether anyone with taste is using it, or how they protect the browsers that lack it. We decode the stylesheets of every site in the showcase, so we can put the two side by side.
Early, and shipped anyway
23 features are not yet widely available and already appear in this set. 7 of
them are guarded by an @supports rule on at least one site. The condition each site tests
is shown, because that line is the whole technique: write the version that works everywhere, then
upgrade inside the guard.
Limited availability Not in every core browser yet.
accent-color
Limited availability7 of 24 ship it · none guard it
Cursor, Playback, Pranksters.com, SEOAIO, StockTools.ai, Vercel, yank.info
Anchor positioning
Limited availability5 of 24 ship it · 3 guard it
Cursor, Framer, Mr.Day, Pitch, Stripe
@supports (background:-webkit-named-image(i)) and (not (position-area:top right))2 sites@supports (anchor-name:--test-anchor)1 site
Without it: Until the badge says widely available, ship the fallback FIRST: position the tooltip with ordinary absolute positioning inside a relative wrapper, then move it to the anchor inside @supports (anchor-name: --a).
corner-shape
Limited availability3 of 24 ship it · 2 guard it
@supports (corner-shape:superellipse(2))2 sites
interpolate-size
Limited availability3 of 24 ship it · 1 guard it
@supports (interpolate-size:allow-keywords)1 site@supports not (interpolate-size:allow-keywords)1 site · the fallback branch
text-box
Limited availability3 of 24 ship it · none guard it
Scroll-driven animations
Limited availability2 of 24 ship it · 2 guard it
@supports (animation-timeline:scroll())2 sites
Without it: The animation lives inside @supports and the bar is simply full-width without it. A reading-progress bar is decoration: the page must work with it sitting still.
Cross-document view transitions
Limited availability1 of 24 ship it · none guard it
Newly available In every core browser, for less than 30 months.
backdrop-filter
Newly available20 of 24 ship it · 1 guard it
Arc, Brittany Chiang, Clerk, Cursor, Electronic Materials Office, Framer, Linear, Mr.Day and 12 more
@supports (backdrop-filter:var(--tw ))1 site
text-wrap: balance
Newly available15 of 24 ship it · none guard it
Arc, Clerk, Cursor, Framer, Linear, Mr.Day, Pitch, Playback and 7 more
Without it: None needed. A browser without it wraps the old way, and the orphan comes back. Add it to every heading today: it costs one line and cannot hurt.
Registered custom properties
Newly available9 of 24 ship it · none guard it
Clerk, Cursor, Playback, Raycast, StockTools.ai, Stripe, Superhuman, Vercel and 1 more
Without it: Without @property the variable is just a string, so the gradient snaps to its new angle on hover instead of sweeping. Same end state, no motion.
Relative colors
Newly available9 of 24 ship it · 6 guard it
Clerk, Cursor, Mr.Day, Playback, Raycast, StockTools.ai, Superhuman, Vercel and 1 more
@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b))))6 sites
Without it: Put a hex on the line above each derived colour.
scrollbar-color
Newly available7 of 24 ship it · none guard it
Clerk, Cursor, Paco Coursey, Rauno Freiberg, Raycast, SEOAIO, Vercel
Gradient interpolation
Newly available6 of 24 ship it · 3 guard it
Clerk, Cursor, Pranksters.com, StockTools.ai, Stripe, Vercel
@supports (background-image:linear-gradient(in lab, red, red))3 sites
content-visibility
Newly available5 of 24 ship it · none guard it
scrollbar-gutter
Newly available4 of 24 ship it · none guard it
Popover
Newly available3 of 24 ship it · none guard it
Without it: A browser without it shows the popover element inline as ordinary content, so hide it with [popover]:not(:popover-open) only inside a support check, or the menu becomes unreachable instead of merely always visible.
transition-behavior
Newly available3 of 24 ship it · none guard it
@starting-style
Newly available2 of 24 ship it · none guard it
Without it: Without it the toast appears instantly instead of fading in. That is the fallback, and it is fine: the entry animation is polish, the message is the content.
light-dark()
Newly available2 of 24 ship it · none guard it
Without it: Declare the light value on its own line first. A browser without light-dark() keeps it, and gets a light theme only, which is what it had before.
Container style queries
Newly available1 of 24 ship it · none guard it
field-sizing
Newly available1 of 24 ship it · none guard it
Without it: Without it the textarea stays at its min-height and scrolls, which is how every textarea has always worked. Give it a sensible rows attribute and you are done.
View transitions
Newly available1 of 24 ship it · none guard it
Without it: Feature-test it: call startViewTransition when it exists, and just make the change when it does not. The element jumps instead of gliding. Nothing breaks.
Safe for years, and mostly ignored
9 features are widely available, which means every core browser has had them for at least 30 months, and 6 or fewer of these 24 sites ship them. Nothing is stopping you.
Media query range syntax
Widely available1 of 24 ship it · widely available since Sept 2025
Read this number carefully. Build tools rewrite range syntax to min-width and max-width for older browsers, so it rarely survives to the served file. Sites may well write it; we can only see what they serve.
Motion path
Widely available1 of 24 ship it · widely available since Mar 2025
Nesting
Widely available1 of 24 ship it · widely available since Jun 2026
Read this number carefully. Sass, PostCSS and Lightning CSS flatten nesting before the file is served, so a shipped stylesheet rarely shows it. Sites may well write it; we can only see what they serve.
Oklab and OkLCh
Widely available1 of 24 ship it · widely available since Nov 2025
Replaces: HSL, whose "lightness" is not the lightness an eye sees. Equal steps in OKLCH look like equal steps, so a tint ramp does not go muddy in the middle.
Trigonometric functions (CSS)
Widely available1 of 24 ship it · widely available since Sept 2025
linear() easing
Widely available3 of 24 ship it · widely available since Jun 2026
prefers-color-scheme media query
Widely available3 of 24 ship it · widely available since Jul 2022
Container queries
Widely available5 of 24 ship it · widely available since Aug 2025
Clerk, Cursor, Stripe, Superhuman, Vercel
Replaces: Media queries that guess at a component’s width from the viewport. The component asks its own container instead, so the same card works in a sidebar and in a hero.
color()
Widely available6 of 24 ship it · widely available since Nov 2025
Electronic Materials Office, Framer, Paco Coursey, Pitch, Rauno Freiberg, Raycast
Every feature we look for
Sorted by how many of the 24 sites ship it.
| Feature | Status | Ship it | Share of the set | Guard it |
|---|---|---|---|---|
| Custom properties | Widely | 24 of 24 | 1 | |
| Flexbox | Widely | 24 of 24 | ||
| Grid | Widely | 24 of 24 | ||
| font-display | Widely | 22 of 24 | ||
| :focus-visible | Widely | 21 of 24 | ||
| aspect-ratio | Widely | 20 of 24 | 2 | |
| backdrop-filter | Newly | 20 of 24 | 1 | |
| min(), max(), and clamp() | Widely | 20 of 24 | ||
| text-underline-offset | Widely | 19 of 24 | ||
| Sticky positioning | Widely | 18 of 24 | ||
| prefers-reduced-motion media query | Widely | 17 of 24 | ||
| :has() | Widely | 16 of 24 | 1 | |
| Logical properties | Widely | 16 of 24 | ||
| Masks | Widely | 16 of 24 | ||
| :where() | Widely | 15 of 24 | ||
| text-wrap: balance | Newly | 15 of 24 | ||
| clip-path | Widely | 14 of 24 | ||
| overflow: clip | Widely | 14 of 24 | 3 | |
| :focus-within | Widely | 13 of 24 | ||
| :is() | Widely | 13 of 24 | ||
| font-variation-settings | Widely | 13 of 24 | ||
| mix-blend-mode | Widely | 13 of 24 | ||
| color-mix() | Widely | 12 of 24 | 6 | |
| Small, large, and dynamic viewport units | Widely | 11 of 24 | 1 | |
| text-wrap: pretty | Limited | 11 of 24 | ||
| color-scheme | Widely | 10 of 24 | ||
| Individual transform properties | Widely | 10 of 24 | ||
| Scroll snap | Widely | 10 of 24 | ||
| Cascade layers | Widely | 9 of 24 | ||
| Registered custom properties | Newly | 9 of 24 | ||
| Relative colors | Newly | 9 of 24 | 6 | |
| Conic gradients | Widely | 8 of 24 | ||
| Subgrid | Widely | 8 of 24 | 2 | |
| accent-color | Limited | 7 of 24 | ||
| scrollbar-color | Newly | 7 of 24 | ||
| color() | Widely | 6 of 24 | 5 | |
| Gradient interpolation | Newly | 6 of 24 | 3 | |
| Anchor positioning | Limited | 5 of 24 | 3 | |
| Container queries | Widely | 5 of 24 | ||
| content-visibility | Newly | 5 of 24 | ||
| scrollbar-gutter | Newly | 4 of 24 | ||
| corner-shape | Limited | 3 of 24 | 2 | |
| interpolate-size | Limited | 3 of 24 | 1 | |
| linear() easing | Widely | 3 of 24 | 1 | |
| Popover | Newly | 3 of 24 | ||
| prefers-color-scheme media query | Widely | 3 of 24 | ||
| text-box | Limited | 3 of 24 | ||
| transition-behavior | Newly | 3 of 24 | ||
| @starting-style | Newly | 2 of 24 | ||
| light-dark() | Newly | 2 of 24 | ||
| Scroll-driven animations | Limited | 2 of 24 | 2 | |
| Container style queries | Newly | 1 of 24 | ||
| Cross-document view transitions | Limited | 1 of 24 | ||
| field-sizing | Newly | 1 of 24 | ||
| Media query range syntax | Widely | 1 of 24 | ||
| Motion path | Widely | 1 of 24 | ||
| Nesting | Widely | 1 of 24 | ||
| Oklab and OkLCh | Widely | 1 of 24 | 1 | |
| Trigonometric functions (CSS) | Widely | 1 of 24 | ||
| View transitions | Newly | 1 of 24 | ||
| @scope | Newly | 0 of 24 | ||
| contrast-color() | Newly | 0 of 24 | ||
| if() | Limited | 0 of 24 | ||
| sibling-count() and sibling-index() | Newly | 0 of 24 |
How this is measured, and what it cannot tell you
The set
The 24 published showcase sites, chosen by an editor for the quality of their design. It is small and it is biased on purpose, towards sites worth learning from. It says nothing about the web as a whole, and the numbers here are counts, never percentages.
The read
The same decoder as /decode: one request for the page, then up to twelve of the stylesheets it links. We read what is served, without running JavaScript, so CSS loaded later or injected by a script is not seen. “0 of 24” means not found in what we read.
The match
Each feature is a pattern run over the CSS with comments removed. For the twenty
features with a page of their own, it is the same pattern that page uses. A feature counts as guarded
when it appears in the condition of an @supports rule. We keep the condition and a count.
We do not keep anybody’s code.
The status
From the open web-features dataset, version 3.39.0, read when this page was built. It is the source behind the badges on MDN. Paste any URL into /decode to get the same report for one site, or ask for it over the free MCP server. For what changed status this year, see CSS in 2026.