text-wrap: pretty
Limited availability9 of 22 ship it · none guard it
Clico, Dominik Kostolnik, Don't Look Up, Electronic Materials Office, HyperSuit, Lynn Fisher, Mr.Day, Raycast and 1 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
20 features are not yet widely available and already appear in this set. 5 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 availability5 of 22 ship it · none guard it
Anchor positioning
Limited availability3 of 22 ship it · 1 guard it
Dominik Kostolnik, Mr.Day, Pitch
@supports (background:-webkit-named-image(i)) and (not (position-area:top right))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 availability1 of 22 ship it · 1 guard it
@supports (corner-shape:superellipse(2))1 site
interpolate-size
Limited availability1 of 22 ship it · none guard it
Scroll-driven animations
Limited availability1 of 22 ship it · 1 guard it
@supports (animation-timeline:scroll())1 site
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.
text-box
Limited availability1 of 22 ship it · none guard it
Newly available In every core browser, for less than 30 months.
backdrop-filter
Newly available14 of 22 ship it · 1 guard it
Clico, Dominik Kostolnik, Electronic Materials Office, HyperSuit, Mr.Day, Pitch, Pranksters.com, Raycast and 6 more
@supports (backdrop-filter:var(--tw ))1 site
text-wrap: balance
Newly available14 of 22 ship it · none guard it
CatNames.com, Catskills, Clico, Dominik Kostolnik, Don't Look Up, HyperSuit, Mr.Day, Pitch and 6 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 available8 of 22 ship it · none guard it
CatNames.com, Catskills, Dominik Kostolnik, Playback, Raycast, StockTools.ai, Superhuman, yank.info
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 available7 of 22 ship it · 4 guard it
CatNames.com, Mr.Day, Playback, Raycast, StockTools.ai, Superhuman, yank.info
@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b))))4 sites
Without it: Put a hex on the line above each derived colour.
content-visibility
Newly available4 of 22 ship it · none guard it
Gradient interpolation
Newly available3 of 22 ship it · none guard it
scrollbar-color
Newly available3 of 22 ship it · none guard it
transition-behavior
Newly available3 of 22 ship it · none guard it
@starting-style
Newly available2 of 22 ship it · none guard it
Superhuman, Velour Productions
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 22 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.
Popover
Newly available2 of 22 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.
scrollbar-gutter
Newly available2 of 22 ship it · none guard it
Container style queries
Newly available1 of 22 ship it · none guard it
Safe for years, and mostly ignored
12 features are widely available, which means every core browser has had them for at least 30 months, and 5 or fewer of these 22 sites ship them. Nothing is stopping you.
Motion path
Widely available0 of 22 ship it · widely available since Mar 2025
Oklab and OkLCh
Widely available0 of 22 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.
linear() easing
Widely available1 of 22 ship it · widely available since Jun 2026
Media query range syntax
Widely available1 of 22 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.
Nesting
Widely available1 of 22 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.
Trigonometric functions (CSS)
Widely available1 of 22 ship it · widely available since Sept 2025
Container queries
Widely available2 of 22 ship it · widely available since Aug 2025
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.
prefers-color-scheme media query
Widely available2 of 22 ship it · widely available since Jul 2022
color()
Widely available3 of 22 ship it · widely available since Nov 2025
Subgrid
Widely available4 of 22 ship it · widely available since Mar 2026
Mr.Day, Pitch, Superhuman, Velour Productions
Replaces: Fixed heights and duplicated track lists to line up the insides of sibling cards. Children join the parent’s grid lines.
Cascade layers
Widely available5 of 22 ship it · widely available since Sept 2024
CatNames.com, Playback, StockTools.ai, Superhuman, yank.info
Replaces: Specificity escalation and !important. Layers decide which stylesheet wins before specificity is consulted, so a reset can never beat a component.
Conic gradients
Widely available5 of 22 ship it · widely available since May 2023
Clico, Pranksters.com, Raycast, Superhuman, Velour Productions
Every feature we look for
Sorted by how many of the 22 sites ship it.
| Feature | Status | Ship it | Share of the set | Guard it |
|---|---|---|---|---|
| Flexbox | Widely | 22 of 22 | ||
| Custom properties | Widely | 21 of 22 | 1 | |
| font-display | Widely | 21 of 22 | ||
| Grid | Widely | 21 of 22 | ||
| min(), max(), and clamp() | Widely | 20 of 22 | ||
| :focus-visible | Widely | 19 of 22 | ||
| aspect-ratio | Widely | 18 of 22 | ||
| prefers-reduced-motion media query | Widely | 17 of 22 | ||
| text-underline-offset | Widely | 17 of 22 | ||
| Logical properties | Widely | 15 of 22 | ||
| :has() | Widely | 14 of 22 | ||
| backdrop-filter | Newly | 14 of 22 | 1 | |
| Sticky positioning | Widely | 14 of 22 | ||
| text-wrap: balance | Newly | 14 of 22 | ||
| :where() | Widely | 13 of 22 | ||
| overflow: clip | Widely | 13 of 22 | 1 | |
| Small, large, and dynamic viewport units | Widely | 13 of 22 | ||
| clip-path | Widely | 12 of 22 | ||
| color-mix() | Widely | 11 of 22 | 4 | |
| Masks | Widely | 11 of 22 | ||
| :focus-within | Widely | 10 of 22 | ||
| :is() | Widely | 10 of 22 | ||
| mix-blend-mode | Widely | 9 of 22 | ||
| text-wrap: pretty | Limited | 9 of 22 | ||
| color-scheme | Widely | 8 of 22 | ||
| font-variation-settings | Widely | 8 of 22 | ||
| Individual transform properties | Widely | 8 of 22 | ||
| Registered custom properties | Newly | 8 of 22 | ||
| Relative colors | Newly | 7 of 22 | 4 | |
| Scroll snap | Widely | 6 of 22 | ||
| accent-color | Limited | 5 of 22 | ||
| Cascade layers | Widely | 5 of 22 | ||
| Conic gradients | Widely | 5 of 22 | ||
| content-visibility | Newly | 4 of 22 | ||
| Subgrid | Widely | 4 of 22 | 1 | |
| Anchor positioning | Limited | 3 of 22 | 1 | |
| color() | Widely | 3 of 22 | 3 | |
| Gradient interpolation | Newly | 3 of 22 | ||
| scrollbar-color | Newly | 3 of 22 | ||
| transition-behavior | Newly | 3 of 22 | ||
| @starting-style | Newly | 2 of 22 | ||
| Container queries | Widely | 2 of 22 | ||
| light-dark() | Newly | 2 of 22 | ||
| Popover | Newly | 2 of 22 | ||
| prefers-color-scheme media query | Widely | 2 of 22 | ||
| scrollbar-gutter | Newly | 2 of 22 | ||
| Container style queries | Newly | 1 of 22 | ||
| corner-shape | Limited | 1 of 22 | 1 | |
| interpolate-size | Limited | 1 of 22 | ||
| linear() easing | Widely | 1 of 22 | 1 | |
| Media query range syntax | Widely | 1 of 22 | ||
| Nesting | Widely | 1 of 22 | ||
| Scroll-driven animations | Limited | 1 of 22 | 1 | |
| text-box | Limited | 1 of 22 | ||
| Trigonometric functions (CSS) | Widely | 1 of 22 | ||
| @scope | Newly | 0 of 22 | ||
| contrast-color() | Newly | 0 of 22 | ||
| Cross-document view transitions | Limited | 0 of 22 | ||
| field-sizing | Newly | 0 of 22 | ||
| if() | Limited | 0 of 22 | ||
| Motion path | Widely | 0 of 22 | ||
| Oklab and OkLCh | Widely | 0 of 22 | ||
| sibling-count() and sibling-index() | Newly | 0 of 22 | ||
| View transitions | Newly | 0 of 22 |
How this is measured, and what it cannot tell you
The set
The 22 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 22” 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.