State of CSS 2024 Preview

[SachaG]

Survey Preview

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

Previous Discussion Thread

• https://github.com/Devographics/surveys/issues/193

New Additions

• @container style queries
• offset-path
• scroll-timeline
• initial-letter
• light-dark()
• @scope

Removals

CSS Features

• content-visibility: too niche
• flexbox gap: widespread usage, no need to keep asking about it
• object-view-box: too niche
• currentColor: widespread usage
• font-palette: too niche
• variables: widespread usage
• shadow DOM CSS: move Web Components questions to State of HTML survey

Other Questions

• "CSS Frameworks" section has been shrunk down to a single question
• "CSS-in-JS" section has been shrunk down to a single question

Under Consideration

Discrete property animations

Discrete property animations/@starting-style/transition-behavior all seem important but under which nomenclature do we include these features?

Maths Functions

Which do we include between:

• trig functions
• stepped value functions
• sign related functions
• exponential functions

nth-child of s

What is the best/least confusing name for that feature?

[SachaG]

Since we added scroll-timeline, maybe we should also add view_timeline?

[SachaG]

I'm going to remove ::marker, seems quite niche compared to some other more important features.

[SachaG]

Also removing individual transform properties for the same reason.

[Kilian]

The appearance property might be too niche, but I think it'd be interesting to see under other features as a gauge for how many people replace existing form elements rather than piling divs.

Maybe too new, but reading-flow under accessibility since it solves a specific but large problem.

I would remove touch-action for being too niche, and replace it with @starting-style (under interactions, since view-transitions are there too) which is new, but also solves a specific but large problem.

[SachaG]

replace it with @starting-style (under interactions, since view-transitions are there too) which is new, but also solves a specific but large problem.

I added discrete_properties_animations as a catch-all for @starting-style and transition-behavior. Would that work?

[tylersticka]

Two quick suggestions:

• I see text-wrap: balance accounted for, but we've been using pretty almost as often since fallbacks are easy and it's often a better fit.
• I wish more folks would clamor for hanging punctuation across browsers.

(I didn't mean to focus on typography, but most of the other stuff in my wish list is already accounted for in the survey or still only a working group discussion.)

[SachaG]

I'm switching css_interoperability_features and css_missing_features to freeform inputs instead of predefined lists to avoid any biasing. We don't have that many other freeform questions so it should be fine.

[SachaG]

• added text-wrap: pretty
• added hanging-punctuation

[bfgeek]

field-sizing: content[1] might be good to get some signal on.

[1] https://developer.mozilla.org/en-US/docs/Web/CSS/field-sizing

[jgraham]

So in general, our feedback is that we'd like to apply similar criteria as mentioned in the State of HTML feedback.

We'd also like to understand where/why people aren't using new features e.g using float instead of grid or flexbox, or where people are using framework features rather than native alternatives e.g. framework variables instead of CSS variables.

However I realise that's quite open-ended feedback for this stage in the process; I'm really mentioning how we're thinking about this for next time around.

More concretely:

• https://captainbrosset.github.io/web-features-explorer/recent/ has a list of features that recently became available in all browsers. I haven't done a complete audit, but I couldn't find :user-valid or :user-invalid in the survey; they seem important given the interest in forms. Maybe also contain-intrinsic-size?
• We could consider having an open-ended question about CSS processors and frameworks, like "Which features of these tools and frameworks do you particularly value?"

[argyleink]

some other additions? (sorry for showin up late)

• text-box-trim and text-box-edge
• anchor()
• :popover-open
• :modal
• ::backdrop
• infinity
• calc-size()
• justify-content: safe
• :user-valid and :user-invalid
• cqw, cqi, cqh, cqb etc
• typography relative units: lh, cap, ex, etc
• there's also MPA view transitions and JS driven SPA transitions, but maybe just having the CSS portions there is plenty and we don't need to show JS or meta tags?

I see line-clamp on there, but it's the old syntax and soon we'll have a modern 1 line replacement without all the oddities. maybe next year this will be on there instead of the display: -webkit-box; version?

[SachaG]

We'd also like to understand where/why people aren't using new features e.g using float instead of grid or flexbox, or where people are using framework features rather than native alternatives e.g. framework variables instead of CSS variables.

I suspect the majority of it would be due to thinking (whether true or not) that new features aren't well-supported yet. Beyond that I think we'll have to rely on the comment field to get more qualitative data.

I couldn't find :user-valid or :user-invalid in the survey

These are in the State of HTML survey. Do we want to bring them over?

We could consider having an open-ended question about CSS processors and frameworks, like "Which features of these tools and frameworks do you particularly value?"

That might be a bit too open-ended… What I've realized it that open-ended questions work best when the answers all belong to a single identifiable category. So for example "what is your favorite new CSS feature?" would work fine as a freeform textfield because we can easily pattern-match after. But "What do you value most about UI frameworks?" would probably result in a lot of different concepts, all with different wordings.

text-box-trim and text-box-edge anchor() :popover-open ...

As far as adding other features, we already have 60 (!) in the survey at it is, so I don't think we can add more unless we remove some first.

I know @foolip has been working on a canonical list of features (which I guess https://captainbrosset.github.io/web-features-explorer/recent/ also uses?). Could this be maybe combined with browser stats and/or github stats to get an idea of actual usage in the wild for each feature? This way we would be able to rank all new features and prioritize the ones that seem more "important" (although I realize there might also be important features that people aren't using, so it's not a perfect proxy).

[jgraham]

These are in the State of HTML survey. Do we want to bring them over?

If we're concentrating all the forms stuff in State of HTML that's fine.

I know @foolip has been working on a canonical list of features (which I guess https://captainbrosset.github.io/web-features-explorer/recent/ also uses?).

Correct.

Could this be maybe combined with browser stats and/or github stats to get an idea of actual usage in the wild for each feature?

Browser stats turn out to be surprisingly hard to interpret e.g. is a popular analytics library starts using a feature for browser fingerprinting then it can look like very high usage, whereas in fact no sites would break if the feature was removed. It's possible that's less of a problem for CSS features, but I'm not sure.

In any case pre-filtering by assumed usage seems somewhat possible, but deciding the right measure of "importance" is hard. The value proposition of asking about features that have shipped is to validate that we're solving real user problems, and haven't left significant rough edges in real world situations. Only asking about things where we know there's wide use biases you toward things that work well, whereas asking about things that aren't used can't provide much useful data. Instead, most of the actionable data is for things in the middle where there's enough usage to get user feedback, but not so much that it's already clear that the feature is a success (and significant concerns are likely to come out in other forums like long-form articles).

[foolip]

I know @foolip has been working on a canonical list of features (which I guess https://captainbrosset.github.io/web-features-explorer/recent/ also uses?).

Correct.

Yep. The data itself is maintained in https://github.com/web-platform-dx/web-features and is also exposed on https://webstatus.dev/.

We are working on adding use counters for features shipped since 2020, but that won't be ready until the end of the year I think. As @jgraham points out there are complexities in interpreting usage numbers, but within an area like CSS I expect that comparing the usage of one property to another will usually make sense.

[SachaG]

I'm not necessarily saying that usage is the best metric, it's just that right now I don't really have a good heuristic to pick one feature over another besides "this seems like something that might have an impact in a few years"…

Maybe another approach could be to have some kind of rotation. So for example one year we'd ask about math functions, but the next we'd focus on typography instead. The downside is that you then lose a year of data for things that might be important… So yeah I don't really have a good solution…

[b1tr0t]

Under CSS usage:

• "The current CSS feature set allows you to build modern, accessible UI with good performance without the need for consultation with specialized developers in these areas." [strongly agree] [agree] [neutral] [disagree] [strongly disagree]
• "In the past year, how many new (<2 years old) CSS features have you used?" [0] [1-2] [2-5] [5-10] [10+] [Leave a comment]
• "What was the most valuable addition to CSS in the past 2 years?" [Leave a comment]
• "Do you believe the gap between CSS feature support in popular design tools and the browser supported capabilities of CSS is impacting what designs developers build?" [yes] [no] [Leave a comment]

[SachaG]

@b1tr0t those are interesting, thanks! But I don't think people know what did or didn't come out in the past 2 years, it's kind of hard to quantify… Maybe we can just ask something simpler, such as "what is your favorite new CSS feature?". Although we can also kind of get this data in aggregate by looking at sentiment scores.

[SachaG]

Added two more questions:

• What are your favorite new CSS features that you started using this year?
• Which of these best describes how you primarily implement designs with CSS?

[SachaG]

By the way, I've decided to launch the survey on August 17. And the State of HTML will follow on September 10. So we can also start working on that one as well:

https://github.com/Devographics/surveys/issues/235

I'll get the preview up soon.

[SebastianZ]

I know I'mquite late for this survey, though here are my notes, anyway. Maybe they might be considered for the next one.

I still find the description of sections a bit vague, sometimes. Would it be possible to add some clarifying tooltips or a description in the right sidebar above the "Reading List"? E.g. when should people actually choose "Used it" regarding new features? Would it be enough if they saw it in scribble/demo and played around with it?

The reading list and the examples for features are great, though sometimes people don't remember if they heard about a feature already or even used it. So it might be worth giving a short description for them inline.

The reading list feature should be restricted to areas in which people can actually learn more about them. E.g. the option should be removed from questions like "How many people work at your organization, including yourself?". (At least unless you come up with a magic way to get those numbers for that person.🙃)

---

design_methodology and favorite_new_features are still missing proper phrases.

"How long have you been working or studying in this field, in years?" should provide list of ranges like the other questions in this category.

Sebastian

[captainbrosset]

• https://captainbrosset.github.io/web-features-explorer/recent/ has a list of features that recently became available in all browsers. I haven't done a complete audit, but I couldn't find :user-valid or :user-invalid in the survey; they seem important given the interest in forms. Maybe also contain-intrinsic-size?

Please use this URL going forward: https://web-platform-dx.github.io/web-features-explorer/recent/ The initial version of the same website, on my captainbrosset.github.io domain, was an early exploration which is now outdated. I will add a redirect to the new URL to avoid any confusion.

[SachaG]

The reading list feature should be restricted to areas in which people can actually learn more about them. E.g. the option should be removed from questions like "How many people work at your organization, including yourself?". (At least unless you come up with a magic way to get those numbers for that person.🙃)

Good catch! That was a bug, fixing it now.

[SachaG]

The survey is now live!

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

I know we had to leave out a lot of important features, but I think capping the survey at 60 features is probably best… Thankfully there's always the State of HTML survey!

[captainbrosset]

@SachaG I still see the "preview" banner when I go to that URL. Is that intended?

[scottkellum]

text-box-trim and text-box-edge would be things I want to see in the Typography section.

[SachaG]

@captainbrosset sorry, cache invalidation and all that… should be ok now!

@scottkellum let's save them for next year!