Přejít na obsah

State of CSS 2024

Funkcionalita

It's no secret that CSS is adding new features at a record rate – which is why we ended up asking about no less than 50 of them this year!

Features

Filter Effects (blur(), contrast(), etc.) were the unexpected most-used CSS feature of 2024, with 75.4% of respondents having used them; with the :has() selector a close second with 72.8%. When ranking for sentiment on the other hand, Subgrid turned out to be the most loved feature, with 51.5% of respondents willing to use it again. The least-used feature? None other than hanging-punctuation, with 84.7% of respondents never having even heard about it!

Filter by:

Group by:

Sort by:

1

75.3%
17.1%
6.9%
8,495
2

72.9%
20.9%
3.6%
7,277
3

72.5%
15.8%
11.1%
8,484
4

72.1%
17.5%
9.8%
9,501
5

66.9%
17.8%
14.6%
7,744
6

65%
22.7%
11.8%
7,338
7

59%
18.1%
22.5%
8,483
8

52.1%
20.5%
27%
7,366
9

51.3%
39.5%
4.7%
7,297
10

51.3%
30.7%
17.5%
7,393

Experience

  • Used it: Respondents who have used an item.
  • Heard of it: Respondents who have heard about an item, but haven't used it.
  • Never heard of it: Respondents who have never heard about an item.

Sentiment

  • Positive: Respondents who are interested in learning more about a technology; or are willing to use it again.
  • Neutral: Responents who did not indicate any sentiment about a technology.
  • Negative: Respondents who are not interested in learning more about a technology; or have used it and had a negative experience.
“Used” average:27%
“Positive” average:37%
“Negative” average:3%
We asked members of the CSS community to share their “pick of the year”

My 2024 Pick: Google's CSS Contributions

It's tempting to say something about the CSS powerhouse that Google has been recently, certainly in the last year. Rachel Andrew, Adam Argyle, Bramus Van Damme, Una Kravets, Tab Atkins, fantasai — and they are all doing big cool stuff publicly mostly.

Note: fantasai now works at Apple.

We asked members of the CSS community to share their “pick of the year”

Chris Coyier

Codepen creator & Shoptalk Show host

Reading List

The Reading List lets you save items you want to learn more about after the survey is complete. So it's no coincidence that the least-known-about feature, hanging-punctuation, also tops our Reading List rankings as the item developers saved the most!

0%
10%
21%
31%
42%
52%
1

1,712
2

1,632
3

1,611
4

1,600
5

1,563
6

1,557
7

1,459
8

1,416
9

1,410
10

1,377
0%
10%
21%
31%
42%
52%
% of question respondents
How many time each item was added to respondent's Reading List, a feature that lets people learn more about specific topics as they take the survey.
3,299
34%

Recommended Resources

Dynamic CSS with Custom Properties (aka CSS Variables)
Lea Verou
MIT

Dynamic CSS with Custom Properties (aka CSS Variables)

Modern browsers ship with CSS Custom Properties, also known as “CSS variables”, a superpower that enables us to create reusable components without any JavaScript dependencies needed
Website Accessibility, v2
Jon Kuperman
Cloudflare

Website Accessibility, v2

Learn how to make your website applications accessible to a wider audience. Use keyboard shortcuts and navigation to help both power users and those with disabilities.
Thanks to our partners for supporting us! Learn more.