State of CSS 2025 Preview

[SachaG]

Preview the 2025 edition here:

https://survey.devographics.com/en-US/survey/state-of-css/2025

Features Added in 2025

• field-sizing
• calc-size()
• ::target-text
• @function
  • too early? or good to start gauging awareness now
• advanced attr()
• text-box-trim

[SachaG]

Candidates for removal:

• writing modes (has been supported for a long time, still low usage)
• prefers-reduced-data (still low usage, has been in survey since 2021)
• filter effects (has been in survey since 2020, high usage)
• font-display (has been in survey since 2020)

[SachaG]

New questions:

• Over the past 5 years, which feature has had the biggest impact on how you write CSS?
• How familiar are you with the Web Platform Baseline indicator?

[js-choi]

Given that writing modes are a major focus area of Interop 2025, it may be worth keeping it another year (or two?).

Note that Interop 2025 considers logical properties such as margin-block, margin-inline, overflow-block, and overflow-inline as part of “writing modes”.

See also web-platform-tests/interop#708, web-platform-tests/interop#814.

[SachaG]

Given that writing modes are a major focus area of Interop 2025, it may be worth keeping it another year (or two?).

Oh I didn't know, good catch!

[noamr]

shape() was also added in 2025.

[mfreed7]

Some random thoughts on a few things:

1. The Anchor Positioning code snippet could be a bit bigger. At a minimum, perhaps instead of anchor-name, use position-area as the one property? That property is kind of the gateway drug for anchor positioning.

2. The discrete properties animations feel like they're in a weird spot, on interactions, but I don't see a better spot. But the example code should include the overlay property: transition: opacity 1s, display 1s allow-discrete, overlay 1s allow-discrete;. Otherwise it'll leave the top layer before the exit animation finishes. I know the point of the survey is to gather information, but you're also conveying information at the same time. People will likely copy/paste code snippets and use them. Since discrete property animations are so difficult to get right, it'd be great if the snippet was copy-paste ready. 😄

3. I love the open ended questions about "what's missing", etc, on the "CSS Usage" tab. However, if someone's looking for those, they'll never find them on "CSS Usage". Perhaps split that tab into two? The one called "CSS Usage" for the first bunch of questions about "how you use CSS", and then a separate tab for "Missing features and pain points"? I'd love it if people could easily find their way there to rant about what they really want to see on the platform.

4. I think maybe the gamechanger_feature needs an actual title? Maybe not, just felt like a placeholder. I like the question that the placeholder is hinting at.

As always, awesome (and super-useful) survey. Thanks for putting it together.

[bramus]

Quick run through:

1. General: The scrollspy on the sidenav never highlights the last section.
2. General: the used syntax highlighter is not up-to-date with the latest syntax. For example, it’s not highlighting: backdrop-filter, offset-path, accent-color, overscroll-behavior, scroll-behavior, view-transition-name, scroll-timeline, view-timeline, etc.
3. Layout: The code example for ”@container style queries” is wrong, as support is limited to custom properties only.
4. Interactions: It’s called the “View Transition API”, not “ViewTransition API”
5. Typograhpy: text-box-edge/text-box-trim is missing an example
6. Accessibility: The prefers-reduced-motion MQ check is wrong. It should read prefers-reduced-motion: reduce
7. Accessibility: Should color-scheme and light-dark() be part of this? They fit better in the Color section.
8. Accessibility: Best to use colors instead of custom props in the light-dark() example.
9. Other features: image() only exists in the spec with no browser implementing it. I would remove this because otherwise you should also include more spec-only things such as ident(). All other features mentioned on this page exist in at least 1 browser, which I would use as the cutoff point.

As for missing features:

• Scroll state container queries
• Customizable Select (which is HTML, but you feature it as appearance: base-select)
• CSS Carousels
• The sibling-* functions
• contrast-color()

[SachaG]

Other features: image() only exists in the spec with no browser implementing it. I would remove this because otherwise you should also include more spec-only things such as ident(). All other features mentioned on this page exist in at least 1 browser, which I would use as the cutoff point.

How close is this to being implemented? If it's on the verge of appearing in browsers we might as well keep it to avoid having one year of missing data. If it's not that likely then yeah we can remove it.

[SachaG]

What about interactivity: inert? should that be included?

[SachaG]

contract-color()

does not seem implemented yet? https://web-platform-dx.github.io/web-features-explorer/features/contrast-color/

I also couldn't find it on caniuse

[SachaG]

New features added:

• css_shape_function
• scroll_state
• sibling_index
• sibling_count
• css_carousels

This brings the total of new features added in 2025 to 11, with only 3 features removed, for a total of 69 features.

That seems like a lot, but I'm not sure which ones to cut… maybe a solution would be removing a section altogether? For example Math or Accessibility (we have an Accessibility section in the State of HTML survey).

[bramus]

Other features: image() only exists in the spec with no browser implementing it. I would remove this because otherwise you should also include more spec-only things such as ident(). All other features mentioned on this page exist in at least 1 browser, which I would use as the cutoff point.

How close is this to being implemented? If it's on the verge of appearing in browsers we might as well keep it to avoid having one year of missing data. If it's not that likely then yeah we can remove it.

I can’t speak authoritatively for other vendors but with the standards positions entries remaining unanswered, I think we can safely assume that this is not being prioritized any time soon:

• https://github.com/WebKit/standards-positions/issues/402
• https://github.com/mozilla/standards-positions/issues/856

Also note that this feature is over a decade old without any implementation, which is another hint.

What about interactivity: inert? should that be included?

Good catch!

contract-color()

does not seem implemented yet? https://web-platform-dx.github.io/web-features-explorer/features/contrast-color/

I also couldn't find it on caniuse

It’s in Safari Technology Preview – https://webkit.org/blog/16929/contrast-color/

[bramus]

Another thing I was wondering: how detailed do you want to go?

Take View Transitions for example, which you can split up into:

• Same-Document View Transitions
• Cross-Document View Transitions

But there’s also these sub-features:

• View Transition Classes (CSS view-transition-class)
• View Transition Types (The types descriptor in @view-transition)
• View Transition Auto Naming (CSS view-transition-name: match-element)
• Nested View Transition Groups (CSS view-transition-group, Experimental)
• Scoped Transitions (Element.startViewTransition, Experimental)

[SachaG]

I think given that there's already an overwhelming number of features mentioned, we can't really afford to get any more granular than this. At this rate the only people who will want to take the survey are CSS WG members…

[bramus]

In that case you can always merge scroll-timeline and view-timeline into “Scroll-Driven Animations (scroll-timeline, view-timeline)” because they are part of the same feature (which just happens to require separate properties for the different use-cases it supports).

[bramus]

With the ident() function getting prototyped in Blink, it might be a good time to add it, so that data is starting to get gathered about it.

[b1tr0t]

For CSS Carousels, consider adding scroll-marker-group to the example as well?

Thanks for all the work on this! Overall looking excellent!

[SachaG]

With the ident() function getting prototyped in Blink, it might be a good time to add it, so that data is starting to get gathered about it.

Seems still a bit early, I couldn't find much documentation about it?

For CSS Carousels, consider adding scroll-marker-group to the example as well?

I debated this but the examples are really meant to stay short and are more to remind people of features they might already know, so I'd rather not make them too long.

[bramus]

With the ident() function getting prototyped in Blink, it might be a good time to add it, so that data is starting to get gathered about it.

Seems still a bit early, I couldn't find much documentation about it?

There will be soon ;)

---

Another thing that came up for inclusion: reading-flow and reading-order

[SachaG]

I think I'm going to cap it at the features that are already in there, otherwise it's really too much. You guys need to slow down, or else I need more than one CSS survey per year :)

[SachaG]

I'm also considering adding some more subjective opinion questions, the main one being asking people if they feel like they are able to keep up with the pace of CSS change.

Any other suggestions? As a reference, last time we had these questions was in 2021:

https://2021.stateofcss.com/en-US/opinions

We asked respondents if they agreed/disagreed with:

• "CSS is easy to learn"
• "CSS is evolving too slowly"
• "Utility (non-semantic) classes (.center, .large-text, etc.) should be avoided"
• "I enjoy writing CSS"

I don't really find those questions that interesting anymore (besides "CSS is evolving too fast/too slowly") so that's why they've been absent from the survey in recent years.

But my personal feelings is that CSS could take a break for 3-4 years to let everybody catch up and that'd be just fine, so I'd be curious to see if respondents share that impression :)

[dbaron]

A thought about the question about calc-size(): calc-size() is part of a pair of features: interpolate-size and calc-size(). I'd expect interpolate-size to be the more commonly used one that more developers are familiar with: it's the easy-to-use feature that gets to the top use case. calc-size() is a lower-level feature (which interpolate-size uses under the hood); while it can do everything that interpolate-size can do and more, it is more difficult to understand and use, and I'd probably expect fewer developers to be familiar with it. See the explainer for more detail.

So it seems a little odd to me to ask only about calc-size() and not about interpolate-size. I'd probably lean towards asking either (a) only about interpolate-size or (b) about both.

[bernhardf-ro]

Requests for additions:

---

CSS Usage should consider PDF as an output medium.

CSS Usage / Testing Environments (Which form factors or environments do you test on?)

CSS Usage / CSS Usage (What kind of project do you usually use CSS for?)

Both should contain "PDF" as an option, to cover CSS Paged Media based HTML to PDF converters. ("PDF" might look like a subset of "print", however, while both use Paged Media, the requirements for PDF differ greatly, including accessibility, bookmarks, links, and so on)

---

Paged Media is now supported in browsers to some degree and has been in commercial PDF converters for years. (This could also be split into multiple features. The following would cover it as one feature.)

Other Features (or Layout)

Paged Media

@page, size, @bottom-right, break-before, etc.

@page {
    size: A4;
    @bottom-right {
        content: counter(page);
     }
}

h1 {
    break-before: page;
}

---

Also the "Leave feedback" link in the top green box leads to the previous (closed) issue.

[atopal]

Can we change the Baseline question to one about the perception of the web as a platform?

The first one would give us a one time indication in 2025 that things have changed with recent improvements via Baseline and Interop. The second question would be an evergreen question to see where we are in absolute terms, and to track changes over time.

Q1 Compared to the past, do you think new web features are becoming stable across major browsers faster today, slower today, or at about the same pace?

Much faster Somewhat faster About the same Somewhat slower Much slower I don’t know

Q2. "How satisfied are you with the speed at which new web features and APIs become reliably usable across major web browsers?"gtm Very Dissatisfied Dissatisfied Neutral Satisfied Very Satisfied