跳到内容

State of CSS 2024

CSS 使用情况

无论你如何使用 CSS，数据显示确保代码在所有浏览器中都能正常工作仍然是一个需要关注的问题，尤其是对于像 :has() 这样的新特性。

测试环境

屏幕阅读器测试的比例从去年的 16.6% 上升到今年的 19%，这是无障碍性日益重要的一个令人鼓舞的迹象。

0%
20%
40%
60%
79%
99%
1

个人电脑

7,133
2

智能手机

4,820
3

平板

3,108
4

仅带键盘的台式机

2,027
5

测试工具

1,907
6

非智能手机

1,800
7

屏幕阅读器

1,330
8

打印机

685
9

视觉模拟题

398
10

TV

138
11

智能手表

34
12

游戏主机

28
13

其他答案

57
0%
20%
40%
60%
79%
99%
受访者百分比
7,185
74%
您会在哪些设备或环境中进行测试？
💡
科学证明，在Twitter、Facebook或电子邮件上分享这项调查， 可以让你的 JavaScript 性能提高15%。

你主要使用CSS做什么？

虽然这些数据并不令人意外，但它很好地提醒了我们 CSS 可以做的不仅仅是格式化网页。

0%
17%
34%
51%
68%
85%
1

网络应用

6,036
2

博客或其他文本密集型网站

3,394
3

营销网站和登录页

3,221
4

设计系统

2,792
5

桌面应用

1,862
6

移动应用程序

1,665
7

电子邮件

1,202
8

插图

581
9

印刷文件

572
10

E-Commerce sites

11

其他答案

107
0%
17%
34%
51%
68%
85%
受访者百分比
7,114
73%
你通常使用CSS做什么样的项目？
我们邀请了 CSS 社区的成员分享他们的"年度之选"

我的 2024 年度之选： linear()

linear() 缓动函数为交互带来了令人惊叹的点睛之笔。
我们邀请了 CSS 社区的成员分享他们的"年度之选"

Adam Argyle

Google

行业

你知道可以按行业部门筛选本次调查的数据吗？只需在任何其他图表上点击"添加筛选器……"即可！

0%
8%
16%
23%
31%
39%
1

编程和技术工具

2,447
2

咨询服务

1,394
3

电子商务与零售

1,235
4

营销/销售/分析工具

846
5

教育

842
6

金融

731
7

娱乐

613
8

新闻、媒体和博客

583
9

卫生保健

468
10

政府

444
0%
8%
16%
23%
31%
39%
受访者百分比
6,310
65%
你在哪个行业工作？

CSS 使用情况

无论你是专业构建网站还是只是业余爱好，使用 CSS 都没有错误的方式！

0%
18%
36%
54%
72%
90%
1

专业

6,384
2

作为学生

186
3

作为爱好

501
4

其他答案

33
0%
18%
36%
54%
72%
90%
受访者百分比
7,061
73%
您主要在什么样的情况下使用 CSS？

设计方法论

虽然绝大多数受访者使用 CSS 来实现预先存在的设计，但随着设计应用程序的发展以及 AI 工具能够直接从创意转化为代码，这种情况是否会发生变化将会很有趣。

0%
12%
24%
36%
48%
60%
1

我实现别人的设计

4,216
2

我在设计应用中创建自己的设计，然后在 CSS 中实现它们

1,004
3

我直接用 CSS 实现自己的设计

1,765
4

其他答案

127
0%
12%
24%
36%
48%
60%
受访者百分比
6,985
72%
哪项最能说明您主要是如何使用 CSS 进行设计的？

CSS 和 JavaScript 的平衡

即便在 CSS 调查的背景下，结果显示大多数受访者仍然在 JavaScript 生态系统中花费了更多时间。只有时间才能告诉我们，随着 CSS 变得越来越强大，这种情况是否也会发生变化。

0%
5%
11%
16%
21%
27%
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%
5%
11%
16%
21%
27%
受访者百分比
7,125
73%
4.4
5
您如何分配编写 CSS（包括 HTML）和 JavaScript 代码的时间？

浏览器不兼容性

没有什么比知道一个新特性可以完美解决你的问题，却因为浏览器支持不佳而无法使用它更令人沮丧的了。 锚点定位就是这样一个前景广阔的新特性，可惜的是，它目前还没有得到广泛支持。 另一方面，容器查询已经可以在基础层面使用并且可以投入使用了，尽管它在许多受访者的回答中仍然出现！

0%
15%
30%
46%
61%
76%
1

2

3

4

5

6

7

8

滚动条样式

9

Browser support

10

Animate on Scroll

0%
15%
30%
46%
61%
76%
受访者百分比
1,547
16%
你是否有因为浏览器之间的差异， 导致在使用 CSS 时遇到困难？
(自由提问)
我们邀请了 CSS 社区的成员分享他们的"年度之选"

我的 2024 年度之选： 卡住了：position:sticky 可能失效的所有方式

在我所有使用 CSS 的岁月里，position: sticky 必须是最令人沮丧的功能之一，但它也极其有用。我一直想写一个指南来帮助人们解决这个问题，幸运的是我不需要了，因为 Kilian 已经完美地完成了这项工作。
我们邀请了 CSS 社区的成员分享他们的"年度之选"

Andy Bell

Piccalilli 和 Set Studio 的设计师、开发者和创始人。

缺失的功能

在没有魔法棒可以让我们凭空变出任何想要的 CSS 特性的情况下，我们能期望的最好结果就是这些数据能够推动浏览器厂商朝着正确的方向前进！ 好消息是：条件逻辑、混合（mixins）和瀑布流布局目前都在以某种形式被开发中！

0%
20%
39%
59%
79%
99%
1

Mixins

2

Conditional Logic

3

砖石布局

4

父选择器

5

6

CSS Functions

7

For Loops

8

Better Animations

9

浏览器支持

10

Scrollbar Styling

0%
20%
39%
59%
79%
99%
受访者百分比
1,223
13%
您认为 CSS 目前完全缺少哪些功能？
(自由提问)

其他 CSS 痛点

虽然浏览器支持仍然是永恒的 CSS 痛点，但 Tailwind CSS 也成为了一些人的烦恼来源——而另一些人则抱怨它使用得不够多！

0%
19%
38%
57%
77%
96%
1

Browser support

2

3

Excessive complexity

4

Safari

5

Conditional Logic

6

7

8

Debugging

9

Animations

10

Layout & positioning

0%
19%
38%
57%
77%
96%
受访者百分比
1,088
11%
写 CSS 的时候是否还有其他痛点？
(自由提问)

最喜爱的新功能

期待已久的特性、合理的实现、良好的浏览器支持：:has() 拥有一切，成为 2024 年最佳新 CSS 特性排行榜的榜首！

0%
10%
20%
30%
40%
51%
1

2

3

4

5

6

7

8

9

10

0%
10%
20%
30%
40%
51%
受访者百分比
2,428
25%
您最喜欢今年开始使用的 CSS 新功能是什么？
(自由提问)
我们邀请了 CSS 社区的成员分享他们的"年度之选"

我的 2024 年度之选： 滚动驱动动画

这是一个游戏规则的改变者，很快就会在所有主要浏览器中得到支持。令人难以置信的是，以前需要大量 JavaScript 才能实现的效果，现在只需几行 CSS 就能完成。
我们邀请了 CSS 社区的成员分享他们的"年度之选"

Ahmad Shadeed

设计工程师，《调试 CSS》一书作者

Web 技术现况

虽然我们确实喜欢抱怨现状，但事实证明，多年来幸福感水平保持着惊人的稳定。

0
1
2
3
4
2020
2021
2022
2023
2024
0
1
2
3
4
平均 {axis}
7,100
73%
2.9
3
您对 Web 技术的整体状况感到满意吗？

CSS 的现况

在 CSS 方面，我们甚至看到了轻微的上升趋势，这证明浏览器厂商、工作组和整个 CSS 社区的辛勤工作并没有被忽视！

0
1
2
3
4
2024
0
1
2
3
4
平均 {axis}
7,107
73%
3.1
3
您对 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.
感谢合作伙伴对我们的支持! 了解更多。