跳至內容

State of CSS 2024

CSS 用法

No matter how you use CSS, the data shows that making sure your code works across all browsers is still a concern, especially for newer features such as :has().

Testing Environments

An encouraging sign of accessibility's growing importance, screen reader testing has gone up from 16.6% to 19% year-over-year.

0%
20%
40%
60%
80%
100%
1

桌機

7,133
2

智慧型手機

4,820
3

平板

3,108
4

只有鍵盤的桌機

2,027
5

測試工具（Axe、Lighthouse⋯等）

1,907
6

傳統手機

1,800
7

報讀器

1,330
8

列印

685
9

視覺改變模擬器（色盲⋯等）

398
10

電視

138
11

智慧型手錶

34
12

遊戲主機

28
13

Other Answers

57
0%
20%
40%
60%
80%
100%
% 問題回應者
7,185
74%
Which form factors or environments do you test on?
💡
科學研究顯示，透過 Twitter、Facebook 或 email 分享本研究調查，最高可以讓 JavaScript 功力增加 15%。

CSS Usage

While this data is unsurprising, it's a nice reminder that CSS can do a lot more than format webpages.

0%
20%
40%
60%
80%
100%
1

Web 應用程式

6,036
2

部落格，或其他充滿文字的網站

3,394
3

行銷網站和登陸頁面

3,221
4

設計系統

2,792
5

Desktop apps

1,862
6

手機應用程式

1,665
7

電子郵件

1,202
8

CSS 藝術與插畫

581
9

印出來的文件

572
10

E-Commerce sites

11

Other Answers

107
0%
20%
40%
60%
80%
100%
% 問題回應者
7,114
73%
What kind of project do you usually use CSS for?
We asked members of the CSS community to share their “pick of the year”

My 2024 Pick: linear()

The linear() easing function has enabled phenomenal finishing touches to interactions.
We asked members of the CSS community to share their “pick of the year”

Adam Argyle

Google

Industry Sector

Did you know you can filter this survey's data by Industry Sector? Just click "Add Filters…" on any other chart!

0%
20%
40%
60%
80%
100%
1

程式與技術工具

2,447
2

顧問與服務

1,394
3

電子商務與零售

1,235
4

行銷/業務/分析工具

846
5

教育

842
6

金融

731
7

娛樂

613
8

新聞、媒體與部落格

583
9

醫療照護

468
10

政府

444
0%
20%
40%
60%
80%
100%
% 問題回應者
6,310
65%
Which industry sector(s) do you work in?

CSS Usage

Whether you build websites profesionally or just dabble, there's no wrong way to use CSS!

0%
20%
40%
60%
80%
100%
1

Professionally

6,384
2

As a student

186
3

As a hobby

501
4

Other Answers

33
0%
20%
40%
60%
80%
100%
% 問題回應者
7,061
73%
In what context do you primarily use CSS?

Design Methodology

While a large majority of respondents use CSS to implement pre-existing designs, it'll be interesting to see if this changes as design apps evolve, and AI tools become capable of going straight from idea to code.

0%
20%
40%
60%
80%
100%
1

I implement other people's designs

4,216
2

I create my own designs in design apps, and then implement them in CSS

1,004
3

I implement my own designs directly in CSS

1,765
4

Other Answers

127
0%
20%
40%
60%
80%
100%
% 問題回應者
6,985
72%
Which of these best describes how you primarily design with CSS?

CSS 與 JavaScript 的平衡

Even in the context of a CSS survey, it turns out a majority of respondents still spend most of their time in the JavaScript ecosystem. Only time will tell if this too will shift now that CSS is becoming more capable.

0%
20%
40%
60%
80%
100%
1

100% CSS

107
2

|

568
3

|

958
4

|

616
5

50/50

1,127
6

|

882
7

|

1,913
8

|

914
9

100% JS

40
0%
20%
40%
60%
80%
100%
% 問題回應者
7,125
73%
4.4
5
如何分配撰寫 CSS（包含 HTML 語法）與 JavaScript 程式碼的時間？

Browser Incompatibilities

There are few worse feelings that knowing a new feature will solve your issue perfectly, yet not being able to use it because of poor browser support.

This is the case with Anchor Positioning, a promising new feature that is sadly not yet broadly supported.

Container Queries on the other hand are available at a baseline level and ready to be used, despite showing up in many respondent's answers!

0%
20%
40%
60%
80%
100%
1

2

3

4

5

6

7

8

Scrollbar styling

9

Browser support

10

Animate on Scroll

0%
20%
40%
60%
80%
100%
% 問題回應者
1,547
16%
Are there any existing CSS features that you have difficulties using (or avoid altogether) because of lack of support, or differences between browsers?
(自由填答問題)
We asked members of the CSS community to share their “pick of the year”

My 2024 Pick: Getting Stuck: All the Ways position:sticky Can Fail

In all my years in CSS, position: sticky has to be one of the most frustrating capabilities, but it’s also extremely useful. I always wanted to write a guide to help people with that but luckily I don’t need to because Kilian nailed this one.
We asked members of the CSS community to share their “pick of the year”

Andy Bell

Designer, developer and founder of Piccalilli and Set Studio.

Missing Features

In the absence of a magic wand that lets us conjure up any CSS feature we can dream of, the best we can hope for is that this data can help push browser vendors in the right direction!

The good news: conditional logic, mixins, and masonry layouts are all currently being worked on in some form or another!

0%
20%
40%
60%
80%
100%
1

Mixin

2

Conditional Logic

3

Masonry Layout

4

上層選擇器

5

6

CSS Functions

7

For Loops

8

Better Animations

9

瀏覽器支援度

10

Scrollbar Styling

0%
20%
40%
60%
80%
100%
% 問題回應者
1,223
13%
What features do you feel are currently missing from CSS altogether?
(自由填答問題)

Other CSS Pain Points

While browser support remains the eternal CSS pain point, Tailwind CSS is also proving to be a source of frustration for some – while others complain that it's not used enough!

0%
20%
40%
60%
80%
100%
1

Browser support

2

3

Excessive complexity

4

Safari

5

Conditional Logic

6

7

8

Debugging

9

Animations

10

Layout & positioning

0%
20%
40%
60%
80%
100%
% 問題回應者
1,088
11%
Any other pain points related to writing CSS?
(自由填答問題)

Favorite New Feature

Long-awaited feature, sensible implementation, good browser support: :has() has it all, and tops the rankings of the best new CSS feature of 2024!

0%
20%
40%
60%
80%
100%
1

2

3

4

5

6

7

8

9

10

0%
20%
40%
60%
80%
100%
% 問題回應者
2,428
25%
What are your favorite new CSS features that you started using this year?
(自由填答問題)
We asked members of the CSS community to share their “pick of the year”

My 2024 Pick: Scroll-driven Animations

This is a game changer that will soon be supported in all major browsers. It's incredible that what once required a lot of JavaScript is now achievable with just a few lines of CSS.
We asked members of the CSS community to share their “pick of the year”

Ahmad Shadeed

Design Engineer and author of Debugging CSS

State of Web Technologies

While we do love to complain about the state of thigns, it turns out happiness levels have remained surprisingly constent over the years.

0
1
2
3
4
2020
2021
2022
2023
2024
0
1
2
3
4
平均
7,100
73%
2.9
3
How happy are you with the general state of web technologies?

State of CSS

We are even seeing a slight uptick when it comes to CSS specifically, proof that the hard work by browser vendors, working groups, and the CSS community at large is not going unnoticed!

0
1
2
3
4
2024
0
1
2
3
4
平均
7,107
73%
3.1
3
How happy are you with the general state of CSS?

推薦資源

SVG Essentials & Animation, v2
Sarah Drasner
Netlify

SVG Essentials & Animation, v2

In this course, you'll learn to create immersive graphics and make them alive with animations!
Design for Developers
Sarah Drasner
Netlify

Design for Developers

Learn how to become self-sufficient for the entire process of execution from concept to design to implementation.
感謝贊助我們的伙伴！ 深入瞭解。