An combined abstract rendering of the state of css and html survey logos

State of CSS and State of HTML 2024

Patrick Brosset -

Sacha Greif's "State Of" surveys have become one of the most useful web development series of surveys. They started out of Sacha's need to learn more about the JavaScript ecosystem, but have now expanded to include more parts of the web platform.

As someone who works on browsers, I can assure you that the results to these surveys are read by browser vendors and used to inform our work. There are a few key questions in these surveys that speak directly to browser vendors, such as questions about the availability of features across browsers, their interoperability, and the pain points that developers feel.

As a web developer, there aren't that many different things you can do to influence the web platform evolution, and taking the time to fill out these surveys is one of them. I know taking time out of your day job is hard, but unlike other means of influencing, this one is a low barrier to entry, and also a great opportunity to learn about new features too.

With that said, let's jump into my analysis of the results of the State of CSS 2024 and the preliminary results of the State of HTML 2024.

Caveat: for both of these surveys, I will only look at the few questions that relate to browser compatibility issues, missing features, and other pain points.

State of CSS 2024

Let's first take a look at the State of CSS survey.

Browser incompatibilities (results)

Participants were asked about which features they couldn't use because of the lack of support, or differences between browsers. The results are quite spread out with no clear winner (or, loser, in this case). The numbers seem fairly low overall too. Here are the top 7 responses (I cut off below 5% of the votes):

Apart from the expected Anchor positioning and View Transition features, which are not yet available across all browsers, the key take away for me here is that developers tend to take a very conservative approach to using new CSS features.

Indeed, Container queries, :has(), Nesting, and Subgrid have been available across all browser engines since 2023. But, 2023 is basically yesterday, and it feels way to soon for people to feel safe using features that have only been available for a year. Not to mention the fact that many developers might not even be aware of these features yet.

Reading through the free-form comments on this question also shows that web devs have been burnt in the past and have to account for large user bases, which don't always migrate to more recent versions of their browsers (this is especially true, it seems, for users on older iOS versions).

Some comments also mention the frustration caused by hearing about new features much too early, when developers can't use them yet. This leads to developers feeling overwhelmed by the number of features that they have to memorize for years before they can use them.

Now, Grid was surprising. It's been available across browsers since 2017, which feels like a long enough time for developers to use. Digging through the comments actually shows that developers were mostly asking about Masonry and Subgrid. So, this is more of a case of the survey not having the right categorization of the results, rather than a signal that Grid is not interoperable (that said, Grid has been part of the Interop project for the past few years, there are always more edge cases to fix).

Respondents also left some interesting comments on specific features:

Missing features (results)

Participants were also asked about which features they thought were missing from CSS.

The numbers are also quite low here with no one feature that stands out. This is explained by some of the comments left on the question where people shared their feeling that there are already too many features to learn, to use, and to keep track of.

That said, here are the top three features that people felt were missing from CSS:

Other pain points (results)

This question is about whether developers are facing any other pain points when writing CSS.

The top response here is absolutely no surprise: browser support. It's not a surprise because the lack of cross-browser support (as well as low interoperability of features) has always been the top pain point in these surveys. Safari is mentioned in quite a few comments.

But, the comments also contain an interesting key take away here related to design tools. This one resonates with some of what I heard at SmashingConf earlier this year. Designers are seeing that CSS has gotten so many features that let you be creative on the web, but also that let you design specifically for the web, that they're feeling held back by their design tools that don't "speak" CSS. This tells me that traditional graphic design and CSS are growing further apart and that there's room for CSS-first design tools.

One final take away on this question is related to complexity, where some people mentioned that CSS was getting very complex to use.

Conclusion

In conclusion, here are some of the opportunities identified by the State of CSS 2024 survey:

State of HTML 2024

At the time of writing, the results from the State of HTML 2024 have not been published yet. I've been given access to the preliminary results, but won't be able to share links to specific survey sections, so you'll need to trust me. I don't expect there to be much changes in the final results though.

Browser interoperability

Participants were asked about which features they couldn't use because of the lack of support, or differences between browsers. Here, the Popover API is the clear winner, with close to 20% of respondents choosing this feature. But apart from this, other features trail off quickly below 10%.

Below is the top 5 features that respondents said they couldn't use because of browser incompatibilities:

Limited functionality

Participants were also asked about features they couldn't use for other reasons. I'll list the top 8 responses below (> 5%). Note that the order isn't super meaningful here because the data seems to contain a bunch of incorrectly categorized responses. That said, I'm less interested in which features came first than the reasons people said they couldn't use those features.

Two key learnings for me here: many elements are not stylable enough, and some are too complex to use.

Missing elements

In this question, respondents were asked to sort a list of pre-determined missing elements, based on what they needed the most.

Below is the top 7 elements, which all got above 20%. Scores to elements after that drop off.

It's worth noting that the list of elements is exactly the same as last year's, in the same order.

This question also got some interesting comments from people saying they didn't want anything new that would be too complex, but instead wanted better primitives to build their own components.

Conclusion

In conclusion, here are the opportunities I can see from the State of HTML 2024 survey:

Going forward

The Web platform is far from ever being done. New problem areas get identified all the time, and new solutions are needed for them. As these make their ways through standards and browser engines, it's important to keep an eye on how well they're being implemented, and how well they indeed solve the problems they were meant to solve.

These State Of surveys are a tremendous tool to help us keep the pulse on what's happening in this world, and therefore to help us prioritize efforts to continue evolving the web platform in the right direction.

Survey fatigue is real, but without signals from the people actually using the platform, those who build it can't do so effectively.