前言
根据 State of CSS 2024 的调查报告，2024 年将是 CSS 的转捩点，标志着从 “传统 CSS” 到 “新 CSS” 的转变。传统 CSS 指的是多年来大多数开发者使用有限的 CSS 功能，并借助外部工具（如库、预处理器、后处理器和严格的方法）来弥补语言限制的编写方式。而新 CSS 则拥抱了 Subgrid、:has()、变量、容器查询以及近年来推出的许多令人兴奋的新 CSS 功能，不仅可以摆脱额外工具，甚至可以开始承担以前需要複杂 JavaScript 解决方案才能完成的任务。今日前端早读课文章由 @飘飘整理分享。
正文从这开始～～
旨在深入分析 "State of CSS 2024" 报告的内容，涵盖 CSS 使用趋势、工具、功能及开发者统计数据。
1. 综述
新旧 CSS 转折点：预测 2024 年将成为 “经典 CSS” 和 “新 CSS” 的转折点，并解释了这两种方法的区别。
经典 CSS 指的是开发者过去常用的 CSS 编写方式，主要依赖有限的 CSS 特性，并借助外部工具（如库、预处理器、后处理器等）来克服语言本身的限制。
新 CSS 则是指拥抱近年来出现的新特性的 CSS 编写方式，例如 Subgrid, :has() 选择器，变量，容器查询等。这些新特性可以减少对外部工具的依赖，甚至可以实现以前需要 JavaScript 才能完成的功能。
新 CSS 时代的来临：由于浏览器厂商重新致力于使新功能真正发挥作用，新 CSS 正迅速崛起。
参与者统计
受访者总数：今年的调查共访问了全球 9,704 名开发者。
地域分布：调查涵盖了全球各地的开发者，其中美国开发者占比最高，其次是德国、英国、法国等欧洲国家。亚洲地区开发者占比相对较低。
年龄分布：大部分受访开发者年龄在 20-39 岁之间，30-39 岁年龄段的开发者占比最高。
工作年限：调查结果显示，大部分开发者拥有 5-14 年的工作经验。
公司规模：开发者任职的公司规模各不相同，其中任职于 101-1000 人规模公司的开发者占比最高。
年薪：本节分析了不同国家和地区的年薪分布，并指出女性开发者的收入落后于其他群体。
高等教育：拥有学位可以确保更高的收入，但学位不一定与编程相关。
性别：加拿大、西班牙、英国和美国的女性受访者比例最高。
种族和民族：非白人受访者更年轻，经验也更少，这可能表明该行业正在进行多元化。
残障情况：越来越多人认识到残障（无论是永久性还是暂时性）在设计和开发过程中应予以考虑。
CSS 用法
跨浏览器兼容性：数据显示确保代码跨浏览器兼容性仍然是一个问题，特别是对于较新的功能，例如 :has() 。
测试环境：屏幕阅读器测试的使用率逐年上升，这表明无障碍设计的重要性日益增加。
调查数据显示，开发者最常在桌面环境中测试他们的 CSS 代码，其次是智能手机和平板电脑。令人鼓舞的是，屏幕阅读器测试的使用率同比增长，这表明开发者越来越重视可访问性。
CSS 使用情景：数据显示 CSS 不仅限于格式化网页，还可以用于各种应用程序，例如桌面应用程序、移动应用程序和电子邮件。
CSS 最常用于 Web 应用程序，其次是博客和其他文字密集型网站、营销网站和登录页面。值得注意的是，CSS 还可以用于桌面应用程序、移动应用程序、电子邮件，甚至 CSS 艺术和插画。
行业分布：本节分析了不同行业中 CSS 的使用情况，并指出可以按行业筛选调查数据。
CSS 使用方式：本节分析了受访者在专业、学术和爱好等不同情况下使用 CSS 的方式。
设计方法：大多数受访者使用 CSS 来实现现有设计，但随着设计应用程序的发展和 AI 工具的出现，这种情况可能会发生变化。
大多数开发者使用 CSS 来实现预先存在的设计，这意味着他们首先在设计应用程序中创建设计，然后使用 CSS 来实现这些设计。然而，也有一部分开发者直接在 CSS 中创建他们的设计。
CSS 与 JavaScript 的平衡：尽管 CSS 的功能越来越强大，大多数受访者仍然将大部分时间花在 JavaScript 生态系统中，调查数据显示，大多数开发者在编写 JavaScript 代码上花费的时间比编写 CSS 代码更多。但随着 CSS 功能的增强，这种情况也可能发生变化。
浏览器不兼容性：浏览器兼容性仍然是开发者面临的主要挑战。一些有前景的新特性，例如 Anchor Positioning，由于缺乏广泛的浏览器支持而难以使用。此外，开发者还报告了在使用 Scrollbar styling、:has() 选择器和 Scroll-driven Animations 等特性时遇到的问题。
【第2752期】CSS 有了:has伪类可以做些什么？
缺少的功能：受访者希望在 CSS 中看到的缺失功能，例如条件逻辑、mixins 和 masonry 布局。
开发者最希望 CSS 添加的特性包括条件逻辑、混合（mixins）和 Masonry 布局。此外，开发者还希望 CSS 能提供更强大的上层选择器、函数、动画和滚动条样式功能。
【第3263期】标准滚动条控制规范 scrollbar-color 和 scrollbar-width
CSS 痛点：除了浏览器支持之外，Tailwind CSS 也成为一些受访者感到沮丧的根源，而另一些人则抱怨它使用得不够多。
最喜欢的 CSS 新功能: :has() 选择器是 2024 年最受欢迎的新 CSS 特性。这个强大的选择器允许开发者根据元素的后代元素来选择元素，从而极大地简化了样式编写。其他受欢迎的新特性包括 Filter Effects、Subgrid 和 Container Queries。
Web 技术现状：数据显示开发者对 Web 技术的满意度多年来一直保持稳定。
CSS 现状：开发者对 CSS 的满意度略有上升，这证明了浏览器供应商、工作组和 CSS 社区的努力得到了认可。
工具和库
持续依赖：尽管 CSS 的新功能解锁了许多功能，但开发人员仍然依赖工具和库来支持他们的工作流程。
CSS 框架: Tailwind CSS 继续在 CSS 框架和 UI 库领域遥遥领先于其他传统竞争对手。Tailwind CSS 是最常用的 CSS 框架，使用率为 75%。
CSS-in-JS: 尽管 CSS-in-JS 的某些吸引力可能已被较新的 CSS 功能（如变量）所取代，但最近的创新（如类型样式和构建时编译）表明该领域仍有很多可提供的内容。
【第3412期】CSS 终于在 2024 年添加了垂直居中功能
预处理器 / 后处理器: Sass/SCSS 仍然是领先的预处理器，但随着 CSS 本身吸收了其许多关键功能，它的使用率是否会保持稳定还有待观察。Sass/SCSS 是最常用的预处理器，使用率为 67%。
实用程序：各种格式化、缩小和调整 CSS 代码的实用程序。
浏览器：四大浏览器仍然占据主导地位，但 Arc 的使用率正在逐年上升，同比增长了 4.2%。
功能
新功能涌现: CSS 正以创纪录的速度添加新功能，本节分析了 50 多个功能的使用率和满意度。
功能使用率：滤镜效果（blur()，contrast() 等）是 2024 年使用率最高的 CSS 功能，有 75.4% 的受访者使用。而 :has() 选择器紧随其后，72.8% 的受访者表示使用过它。过滤器效果（blur()、contrast() 等）。
功能满意度: Subgrid 成为最受喜爱的 CSS 功能，51.5% 的受访者愿意再次使用它。而 hanging-punctuation 则是最不常用的功能，84.7% 的受访者甚至从未听说过这个特性！。
跨浏览器兼容性仍然是挑战：确保代码在所有浏览器上都能正常工作仍然是一个问题，特别是对于 :has() 等新功能。
最常用的功能
🏆 CSS 滤镜效果（Filter effects） 获得了最高使用率，证明其持久性和实用性。
CSS 滤镜效果已经存在了一段时间，而且它们仍然像以往一样有用！
其他常用的功能包括 :has() 和内容物尺寸 (Intrinsic Sizing)，使用率分别为 72.8% 和 72.5%。
最少使用的功能
🏆 hanging-punctuation 成为最不为人知的 CSS 功能，使用率最低。
forced-colors 和 view-timeline 也是较少使用的功能，使用率分别为 1.7% 和 2.3%。
最受欢迎的功能
🏆 Subgrid 获得了 51.5% 的受访者正面评价，成为最受欢迎的功能。
有 51.5% 的受访者对 Subgrid 持有正面印象，它在我们的排名中名列前茅。
:has() 和 aspect-ratio 也获得了较高的正面评价，分别为 46.9% 和 46.8%。
最多留言的功能
🏆 Subgrid 获得了超过 331 条评论，部分原因是它在调查中出现较早，但也因为它确实是一个值得称讚的功能。
Subgrid 获得了超过 331 条评论，部分原因是它在调查中出现较早，但也因为它确实是一个值得称赞的功能！
关于本文
译者：@飘飘
作者：@Sacha Greif
原文：https://2024.stateofcss.com/zh-Hant/
这期前端早读课
对你有帮助，帮” 赞 “一下，
期待下一期，帮” 在看” 一下 。
