Published: December 6, 2024
The results for the State of CSS 2024 and State of HTML 2024 are now live. This post takes an initial look at some of the most interesting findings in those surveys.
Optimism about the web platform
Before looking at some of the issues people are having with HTML and CSS, the surveys do convey a lot of optimism about the platform. When asked if the web platform is moving in the right direction overall, 58% of people taking State of HTML agreed with that statement, with 18% agreeing strongly.
For CSS, :has() stormed away as the favorite new CSS feature with 36% of
people ranking it as the best new feature. The second favorite being
@container at 17% tied with CSS nesting.
What are you using?
There were some surprises in the CSS data. For example, over 75% of people have used CSS filter effects making it the top used feature. Given the number of complaints about the cascade over the years, it's interesting that cascade layers are used by only 18.9% of people. Perhaps there's a link here to adoption of tools such as Tailwind that prevent people ending up in cascade related issues as often.
Landmark elements such as <main> and <nav> come out top of the HTML survey
for things you are using. It's great to see so many people using lazy loading,
and responsive images techniques.
Top browser support issues
Problems with interoperability, or browser support for features, always come up when we talk to developers. The surveys directly asked you for the problems you've encountered. The top 10 problematic features are as follows, ranked by percentage of people selecting that feature.
- Popover API
- Anchor positioning
- Container Queries
:has()- CSS nesting View
- Transition API
- Subgrid
- Grid
<dialog>- Progressive Web Apps
Anchor positioning scored 11% in both surveys, the View Transition API 9% in State of CSS and 8% in State of HTML showing how valuable these features are seen to be by developers.
Interestingly, several of the features are interoperable. Container queries,
:has(), CSS nesting, and subgrid are Baseline Newly available, The Popover API
would be, but for an issue with light dismiss on iOS. The <dialog> element is
now Widely available, as is CSS grid layout. It might be worth digging into
these results to find out what problems people are having. The responses for
grid, for example, often refer to it being hard to learn, rather than citing an
actual interoperability issue.
We hope that Baseline will help developers to understand the status of things, and to know if a problem they are seeing is due to lack of browser compatibility, or something else. It's great to see that these surveys highlight the Baseline status of features. You can also see the availability status across browsers for top CSS issues on webstatus.dev.
Missing features
The surveys also ask which features and functionality are missing from the
platform. This helps us to see what's still hard to do. There were lower
response rates to this question, however in the State of CSS survey people most
frequently asked for mixins, conditional logic, and masonry layout.
Interestingly people also asked for a parent selector (:has() provides that
functionality) and nesting—which already exists and is Baseline Newly available.
The question that the State of HTML respondents were asked was, "If you could add 3 elements to HTML, what would they be?" 51% of people asked for data tables, other popular choices include tabs and toggle elements.
What do you want to know more about?
The surveys have a feature where you can add items to a reading list, if you want to know more about them after completing the survey. This is valuable data—especially if you are engaged in the business of creating developer content. The following list is the top ten features across the two surveys, ranked by percentage of survey-takers who added them to their list.
- CSS
hanging-punctuation - CSS
offset-path @scope- Anchor positioning
- Customizable select
view-timelinescroll-timelinefocusgroupattribute- Discrete properties animation
image()
Take a look at the full results with the CSS reading list and HTML reading list.
One signal from the web community
Chrome supports these surveys because it's one way that we can get information about your top pain points, and the things you are most interested in across the web platform. It's not the only signal we use, but they are a place where you can directly tell us your thoughts. If you filled in one or both of these surveys, thank you! You are helping us to make the web better in the way that you want. If you'd like to help, there's still time to participate in The State of JS.