大家好，我是 Coco。
最新的一期 State Of CSS 调查报告已经出炉啦，下面我们一起来看看有哪些值得关注的点。
2024 年，将会被视为 “经典CSS” 和 “新CSS” 之间的转折点。
经典 CSS 是我们多年来编写 CSS 的方式：使用有限的特性集，并通过外部工具（如库、预处理器和后处理器）以及严格的方法论来弥补语言的局限性。
而新 CSS 则代表了一种全新的编写方式，它拥抱了 Subgrid、:has()、变量、容器查询等近年来引入的许多创新特性。不仅可以减少对额外工具的依赖，甚至可以处理一些之前需要复杂 JavaScript 方案的任务。
这一切都归功于各大浏览器厂商重新承诺，将这些新特性充分发挥出来 —— 我们才刚刚开始触及新 CSS 带来的无限可能。
受访者国家分布
这个分布有点意思，还是老美工资高啊！
受访者年龄分布
也有一个和工资的分布，40岁以上的居然是主力军？
特性
Filter Effects（如 blur()、contrast() 等）在2024年意外成了最受欢迎的 CSS 特性，75.4%的受访者曾使用过它们；其次是 :has() 选择器，使用率为 72.8%。然而，在用户喜爱度排名中，Subgrid 成为了最受欢迎的特性，51.5%的受访者表示愿意再次使用它。使用率最低的特性？那就是 hanging-punctuation，84.7% 的受访者甚至从未听说过这个特性！
... 中间部分省略
CSS 框架
在 CSS 框架和 UI 库方面，Tailwind CSS 继续大幅领先于其他更传统的竞争者，开辟了自己的一条独特道路。
CSS-IN-JS
尽管一些 CSS-in-JS 的吸引力可能因为诸如 CSS 变量等新特性的出现而有所减少，但近期的创新（如类型化样式和构建时编译）显示，这一领域仍然有很多值得探索的地方。
预处理器 / 后处理器
Sass/SCSS 在这一领域仍然处于领先地位，但随着许多关键功能被 CSS 自身吸收，是否能保持其使用率将会变得有趣且值得关注。
工具类
对于格式化、压缩以及其他调整 CSS 代码的方法不胜枚举，完全可以根据你的喜好进行处理。
浏览器
虽然四大主流浏览器在图表中占据主导地位，但 Arc 浏览器的排名正在逐步上升，其使用率从一年中的 7.8% 提升到了 12%。
CSS 使用情况
虽然这些数据并不令人意外，但它很好地提醒了我们，CSS 能做的不仅仅是网页的格式化，它的功能远不止如此。
CSS 与 JavaScript 的平衡
即使是在 CSS 调查的背景下，大多数受访者仍然表示他们的大部分时间花在了 JavaScript 生态系统中。随着 CSS 能力的不断提升，这一情况是否会发生变化，只有时间能证明。
浏览器不兼容性
没有比知道一个新功能能完美解决你的问题，却因为浏览器支持不佳而无法使用更糟糕的感觉了。
例如，Anchor Positioning 是一个非常有前途的新功能，但遗憾的是，目前尚未得到广泛支持。
另一方面，Container Queries 已经在基础层面上可用，并且可以使用，尽管它出现在许多受访者的回答中。
缺失的功能
虽然我们没有像魔法棒一样能让我们随心所欲生成任何 CSS 功能，但我们最好的希望是这些数据能够推动浏览器厂商朝着正确的方向改进！
好消息是：条件逻辑、混入（mixins）和瀑布流布局（masonry layouts）等功能目前都在不同形式下进行开发中！
最喜欢的新功能
期待已久的功能、合理的实现、良好的浏览器支持：:has() 完全符合这些要求，并且成为 2024 年最佳新 CSS 功能排行榜的首位！
最常用功能
获奖者： CSS 滤镜效果
滤镜效果已经存在一段时间了，依旧非常有用！
亚军：
:has()：72.8%内在尺寸关键词（Intrinsic Sizing Keywords）：72.5%
最不常用功能
获奖者： 悬挂标点符号（hanging-punctuation）
悬挂标点符号被评为最不为人知的 CSS 功能！
亚军：
强制颜色（forced-colors）：1.7% 视图时间线（view-timeline）：2.3%
最受喜爱功能
获奖者： 子网格（Subgrid）
有 51.5% 的受访者对子网格功能持积极评价，这使其在我们的排名中位居榜首。
亚军：
:has()：46.9%宽高比（aspect-ratio）：46.8%
最多评论功能
获奖者： 子网格（Subgrid）
子网格功能获得了超过 331 条评论，部分原因是它很早就出现在调查中，但也因为它确实是一个值得赞美的功能！
亚军：
行限制（line-clamp）：100 CSS 嵌套（CSS Nesting）：99
最后
在过去的两年中，CSS 发展迅速，新功能层出不穷，让人感觉跟上这些变化就像是一项全职工作。这也意味着，有很多新的主题和想法值得我们去探索和尝试。
例如，多年来被不断请求的 CSS :has() 伪类，最终被证明是 CSS 最强大的新增功能之一，大大减少了对 JavaScript 的需求。对我来说，这种变化可以与从使用 CSS 浮动布局到 Flexbox 布局的过渡相提并论，Flexbox 让我们能够创建几乎任何我们能想象到的布局。
另外，CSS 容器尺寸和样式查询也是构建不同上下文中需要工作的组件的变革性工具。目前，只有尺寸容器查询在所有主流浏览器中得到了全面支持，尽管它们的使用仍然有限。
展望 2025 年，我希望看到尺寸容器查询的更广泛使用，以及滚动驱动动画、样式查询和锚定位的全面浏览器支持。我们还能要求更多吗？这一切都将使得使用 CSS 构建网页变得更加高效和灵活。
参考：https://2024.stateofcss.com/
大家对今年的调查报告有什么想法？欢迎在评论区留言！
如果觉得还不错，欢迎点赞、收藏、转发❤❤
