跳到内容
HTML 2024 现状调查现已开始！现在就参加调查 →

State of CSS 2024

从业者统计

今年的调查吸引了来自世界各地的 9,704 名开发者参与。

你的国家或地区

Where do you currently reside?

虽然美国仍然代表了最大的单一群体，但我们很高兴看到其他国家的受访者也有很好的分布——尽管亚洲地区的代表性仍然不足。

0%
5%
10%
15%
19%
24%
1

美国

1,135
2

德国

607
3

英国

425
4

法国

399
5

俄罗斯

287
6

荷兰

267
7

西班牙

229
8

加拿大

210
9

波兰

200
10

瑞典

160
11

澳大利亚

149
12

巴西

134
13

意大利

134
14

印度

121
15

日本

114
16

捷克

112
17

乌克兰

100
18

挪威

88
19

瑞士

87
20

比利时

83
21

超出限制

1,632
0%
5%
10%
15%
19%
24%
受访者百分比
6,673
69%
💡
在整个调查结果中，你会发现类似这样的小提示， 它们将指出额外的特性和细节。

年龄

你的年龄是多少岁?

CSS 在 Alpha 世代的受访者中表现不佳，可能是因为他们太忙于玩《堡垒之夜》了。 等等，《堡垒之夜》现在还流行吗……？

0%
8%
17%
25%
34%
42%
1

<20

196
2

20-29

1,826
3

30-39

2,829
4

40-49

1,402
5

50-59

386
6

>60

98
0%
8%
17%
25%
34%
42%
受访者百分比
6,737
69%
34.9
34

年限

你已于当前领域工作（研究）多长时间？

这张图表揭示，大多数受访者有幸从未需要处理基于 float 的定位。

0%
5%
10%
15%
21%
26%
1

0-4 years

1,233
2

5-9 years

1,763
3

10-14 years

1,391
4

15-19 years

960
5

20-24 years

875
6

25-29 years

471
7

Over 30 years

168
0%
5%
10%
15%
21%
26%
受访者百分比
6,861
71%
12.7
10
我们邀请了 CSS 社区的成员分享他们的"年度之选"

我的 2024 年度之选： :has()

:has 伪类允许你创造真正有创意的东西。但它也允许你"上游"，例如当你悬停在其中一个子元素上时改变形状的地图。
我们邀请了 CSS 社区的成员分享他们的"年度之选"

Augustin Mauroy

Web 开发者 & 开源爱好者

公司规模

所在公司规模分析

公司规模越大，薪资越高。不过，我们的数据显示，如果你够优秀，无论公司规模如何，你都能赚到不错的收入。

0%
4%
8%
12%
16%
21%
1

1 个雇员

654
2

1-5 个雇员

569
3

5-10 个雇员

464
4

10-20 个雇员

611
5

20-50 个雇员

785
6

50-100 个雇员

723
7

100-1000 个雇员

1,416
8

超过 1000 个雇员

1,187
9

不清楚

466
0%
4%
8%
12%
16%
21%
受访者百分比
6,875
71%
321.8
75
💡
一些图表具有额外的选项卡，提供相同数据的补充细分， 千万别忽视了它们！

薪资

年收入（美元）

虽然我们经常听到硅谷六位数薪资的传闻，但现实是全球大多数前端开发者的收入远低于这个水平。当直接比较美国和世界其他地区时，这一点变得尤为明显。

0%
3%
6%
9%
12%
16%
1

0 美元 - 2 万美元

726
2

2 万美元 - 4 万美元

894
3

4 万美元 - 6 万美元

999
4

6 万美元 - 8 万美元

920
5

8 万美元 - 10 万美元

663
6

10 万美元 - 15 万美元

817
7

15 万美元 - 20 万美元

365
8

超过 200k 美元

231
9

不清楚

829
0%
3%
6%
9%
12%
16%
受访者百分比
6,444
66%
$74,853
$70,000

高等教育学位

你有过高等教育的经历吗？

虽然拥有学位确实能让你赚得更多，但事实证明，这个学位不一定要与编程相关——这对我们中那些在人生后期才发现对 Web 开发的热情的人来说是个好消息。

0%
10%
20%
30%
40%
50%
1

无

1,826
2

有，科班出身

3,419
3

有，非科班出身

1,588
0%
10%
20%
30%
40%
50%
受访者百分比
6,833
70%
我们邀请了 CSS 社区的成员分享他们的"年度之选"

我的 2024 年度之选： 样式查询和 if()

我的选择是样式查询和内联 if()。一旦这两个特性在所有地方都可用，我们用 CSS 变量能做的事情将会提升十倍。
我们邀请了 CSS 社区的成员分享他们的"年度之选"

Lea Verou

Font Awesome 的产品负责人

性别

你的性别是？

加拿大、西班牙、英国和美国的女性受访者比例最高。 我们的数据还显示，女性的收入相对于其他群体有所落后。虽然造成这种情况的原因超出了本报告的范围，但很明显，我们行业中的女性确实面临一些独特的挑战。

0%
17%
35%
52%
70%
87%
1

男

5,985
2

女

712
3

第三性别

152
4

不在选项中

18
0%
17%
35%
52%
70%
87%
受访者百分比
虽然我们知道收集和发布这些数据可能是一个敏感问题， 但我们确实认为获取这些数据以帮助大家做决策是很重要的。 我们会尽可能在包容性和代表性方面做出努力。
6,867
71%

种族与民族

以下哪个选项描述了你（如果有）？ 请检查所有适用的选项。

非白人受访者更可能年轻且经验较少——这有望预示着行业正在持续多元化。

0%
16%
31%
47%
62%
78%
1

欧洲

4,758
2

西班牙/拉美

596
3

东亚

333
4

中东

199
5

南亚

175
6

东南亚

151
7

多种族

139
8

非洲

122
9

欧洲

10

美洲/太平洋/澳大利亚原住民

22
11

斯拉夫

12

犹太

13

其他答案

80
0%
16%
31%
47%
62%
78%
受访者百分比
虽然我们知道收集和发布这些数据可能是一个敏感问题， 但我们确实认为获取这些数据以帮助大家做决策是很重要的。 我们会尽可能在包容性和代表性方面做出努力。
6,103
63%

残疾状况

如果有的话，你有以下哪些残疾？ 请检查所有选项。 请注意，这可能包括暂时的残疾或受伤。

多亏了无障碍倡导者的持续努力，我们现在接受将残疾（无论是永久性还是暂时性的）作为设计和开发过程中需要考虑的一部分。

0%
15%
30%
45%
60%
75%
1

认知障碍

1,037
2

视觉障碍

362
3

听力障碍

201
4

行动不便

181
5

🚫 无

4,516
6

其他答案

92
0%
15%
30%
45%
60%
75%
受访者百分比
6,025
62%

来源

虽然大多数受访者是从往年的调查中了解到今年的调查，但 Kevin Powell 也为我们带来了大量的调查参与者。

0%
11%
22%
33%
45%
56%
1

State of CSS

4,660
2

761
3

Twitter/X

301
4

Mastodon

216
5

工作

209
6

Web.dev

173
7

YouTube

138
8

Daily Dev

137
9

CSS Weekly

136
10

State of JavaScript

122
0%
11%
22%
33%
45%
56%
受访者百分比
这些数据是自报答案、推荐人数据和URL跟踪数据的混合。
8,357
86%

资源推荐

Learn CSS, from Laying Out Websites to Performant Animations

Learn CSS, from Laying Out Websites to Performant Animations

CSS is rich in capabilities and is more than simply laying out pages! Replace costly JavaScript with CSS.
感谢合作伙伴对我们的支持! 了解更多。