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.
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.