发布时间：2024 年 12 月 6 日
2024 年 CSS 现状和 2024 年 HTML 现状的结果现已发布。本文将初步介绍这些调查中的一些最有趣的发现。
对 Web 平台的乐观态度
在了解用户在使用 HTML 和 CSS 时遇到的一些问题之前，我们先来看看调查结果，看看用户对该平台的态度。当被问及 Web 平台总体上是否朝着正确的方向发展时，58% 的参与“HTML 现状”调查的人员同意这一说法，其中 18% 的人非常赞同。
对于 CSS，:has() 以绝对优势成为最受欢迎的 CSS 新功能，36% 的受访者将其评为最佳新功能。@container 以 17% 的支持率位居第二，与 CSS 嵌套并列。
您使用的是哪款设备？
CSS 数据中有一些出乎意料的结果。例如，超过 75% 的用户使用过 CSS 滤镜效果，这使其成为最常用的功能。考虑到这些年来有关广告瀑布流的投诉数量，有趣的是，只有 18.9% 的用户使用广告瀑布流层。这可能与采用 Tailwind 等工具有关，这些工具可以防止用户经常遇到与级联相关的问题。
在您使用的 HTML 元素中，<main> 和 <nav> 等地图项元素排名靠前。很高兴看到有这么多人在使用延迟加载和响应式图片技术。
热门浏览器支持问题
与开发者沟通时，互操作性问题或浏览器对功能的支持问题总是会被提及。这些调查问卷会直接询问您遇到的问题。以下是 10 项最常见的问题功能，按选择该功能的用户百分比排名。
- Popover API
- 锚点定位
- 容器查询
:has()- CSS 嵌套视图
- Transition API
- 子网格
- 网格
<dialog>- 渐进式 Web 应用
在两项调查中，锚点定位的得分均为 11%；在 CSS 状态调查中，View Transition API 的得分为 9%，在 HTML 状态调查中，得分为 8%，这表明开发者认为这些功能非常有价值。
有趣的是，其中有几个功能是可互操作的。容器查询、:has()、CSS 嵌套和子网格是基准级别。新推出了 Popover API，但由于 iOS 上存在轻量关闭问题，因此无法达到基准级别。<dialog> 元素和 CSS 网格布局现已广泛提供。不妨深入研究这些结果，了解用户遇到了哪些问题。例如，对于网格，用户的回答通常是指网格难学，而不是指出实际的互操作性问题。
我们希望基准测试有助于开发者了解各种情况，并了解他们遇到的问题是由于浏览器不兼容还是其他原因所致。很高兴看到这些调查突出显示了功能的基准状态。您还可以在 webstatus.dev 上查看各浏览器中 CSS 热门问题的可用性状态。
缺少功能
调查问卷还会询问平台缺少哪些功能。这有助于我们了解仍有哪些难题需要解决。虽然对此问题的回复率较低，但在 CSS 现状调查中，人们最常提出的问题是混合函数、条件逻辑和砖块布局。有趣的是，用户还要求提供父级选择器（:has() 提供此功能）和嵌套功能，这两项功能已经存在，并且是“新基准”中提供的功能。
我们向“HTML 现状”调查问卷的回复者提出了以下问题：“如果您可以向 HTML 添加 3 个元素，它们会是什么？”51% 的用户希望使用数据表格，其他热门选项包括标签页和切换开关元素。
您希望了解哪方面的详细信息？
如果您想在完成调查问卷后详细了解其中的项目，可以使用调查问卷中的功能将这些项目添加到阅读列表中。这些数据非常有价值，尤其是如果您从事的是开发者内容创作业务。以下列表列出了这两项调查中排名前 10 的功能，按将这些功能添加到列表的调查参与者所占百分比进行排名。
- CSS
hanging-punctuation - CSS
offset-path @scope- 锚点定位
- 可自定义的选择
view-timelinescroll-timelinefocusgroup个属性- 离散属性动画
image()
查看 CSS 阅读清单和 HTML 阅读清单，了解完整结果。
来自网络社区的一个信号
Chrome 支持这些调查问卷，因为这是我们了解您在网络平台上最关注的问题和最感兴趣的事项的一种方式。这并不是我们使用的唯一信号，但您可以通过这些信号直接告诉我们您的想法。如果您填写了其中一个或两个调查问卷，我们在此表示感谢！您将帮助我们按照您希望的方式改进网络。如果您想提供帮助，还可以参与 The State of JS 计划。