跳到内容

State of CSS 2026

CSS 使用情况

你如何使用 CSS。

测试环境

Testing environments don't show much change compared to last year, with accessibility testing still not as common as it should be.
您会在哪些设备或环境中进行测试？
多选
0%
20%
40%
60%
80%
100%
01
个人电脑
3,774
02
智能手机
2,510
03
平板
1,570
04
仅带键盘的台式机
1,300
05
测试工具
1,054
06
非智能手机
1,030
07
屏幕阅读器
799
08
打印机
477
09
PDF 导出
306
10
视觉模拟题
262
0%
20%
40%
60%
80%
100%
受访者百分比
3,781
77%
10
26%
Percentage of survey respondents who do not generate any CSS code using AI whatsoever.

CSS AI Code Generation

What's fascinating about this chart is that it looks completely different from a similar question asked in the State of AI or State of JS surveys. Comments on this question point to the fact that AI isn't great at CSS just yet. Time will tell if this is just a temporary limitation, or if we will one day have AI so powerful it's even able to fully grasp how CSS grid layouts work.

What proportion of the CSS code you produce is AI-generated?
0%
20%
40%
60%
80%
100%
1
0% AI
980
2
|
941
3
|
562
4
|
206
5
50%
322
6
|
157
7
|
312
8
|
188
9
100% AI
64
0%
20%
40%
60%
80%
100%
受访者百分比
3,732
76%
28%
13%
10
💡
科学证明，在Twitter、Facebook或电子邮件上分享这项调查， 可以让你的 JavaScript 性能提高15%。

浏览器不兼容性

Anchor Positioning and the View Transition API are still the features respondents are refraining from using the most due to browser issues.

It's also interesting to note that Container size queries and Grid still show up in this chart, despite both having the Widely Available Baseline status.

你是否有因为浏览器之间的差异， 导致在使用 CSS 时遇到困难？
(自由提问)
多选
0%
20%
40%
60%
80%
100%
01
02
+1
03
04
Safari 问题
+1
05
-3
06
07
08
+1
09
+2
10
0%
20%
40%
60%
80%
100%
受访者百分比
632
13%
20
10

缺失的功能

While we're still waiting for Mixins to make their way to CSS, browser vendors did address our pleas for Masonry Layout, last year's number two most-requested feature, in the form of the new display: grid-lanes syntax.
您认为 CSS 目前完全缺少哪些功能？
(自由提问)
多选
0%
20%
40%
60%
80%
100%
1
Mixins
2
3
4
5
Media Query Variables
+5
6
Form Elements Styling
+2
7
砖石布局
-5
8
其他答案
0%
20%
40%
60%
80%
100%
受访者百分比
436
9%
10

最喜爱的新功能

:has() may still be as awesome as ever, but with many developers having already used it for over a year, it has lost its “best new feature” crown to Anchor Positioning, which gained 4 ranks to take the top spot.
您最喜欢今年开始使用的 CSS 新功能是什么？
(自由提问)
多选
0%
20%
40%
60%
80%
100%
01
+4
02
-1
03
-1
04
-1
05
-1
06
+4
07
+2
08
-1
09
-3
10
+3
0%
20%
40%
60%
80%
100%
受访者百分比
913
19%
20
10

变化速度

If you feel behind because you haven't used every single new CSS feature that's come out this year, don't. As this chart shows, most respondents are in in the middle of their feature adoption curves, having only learned about and tried out some of the features included in the survey.

您通常能多好地跟上新的 CSS 特性，比如本次调查中提到的那些？
0%
20%
40%
60%
80%
100%
1
我还没了解或尝试过大多数特性
533
2
我了解过一些特性，但还没尝试过
936
3
我了解并尝试过一些特性
1,144
4
我了解大多数特性并尝试过其中一些
798
5
我了解并尝试过大多数特性
290
0%
20%
40%
60%
80%
100%
受访者百分比
3,701
76%
2.8
3
10

Web 技术满意度

Respondents were relatively happy with the state of web technologies in general, maintaining a 3.8 average on a 5-point scale.
您对 Web 技术的整体状况感到满意吗？
1
2
3
4
5
2020
2021
2022
2023
2024
2025
2026
1
2
3
4
5
平均 {axis}
3,737
76%
3.8
4
10

CSS 的现况

On the other hand, happiness with CSS specifically shows a clear upwards trend in recent years, which happens to align nicely with the language's own rapid pace of improvement.
您对 CSS 的整体状况感到满意吗？
1
2
3
4
5
2020
2021
2022
2023
2024
2025
2026
1
2
3
4
5
平均 {axis}
3,747
76%
4
4
10

资源推荐

Getting Started with CSS, v2
Jen Kramer
AnnieCannons

Getting Started with CSS, v2

Build a modern portfolio with CSS! Learn the foundations of layout and UI design as you explore semantic HTML markup, navigation styles, media queries, and CSS custom properties.
SVG Essentials & Animation, v2
Sarah Drasner
Google

SVG Essentials & Animation, v2

In this course, you'll learn to create immersive graphics and make them alive with animations!
感谢合作伙伴对我们的支持! 了解更多。