史上第一次 HTML 全球调研揭晓！我偷偷学到了什么~

给前端以福利，给编程以复利。大家好，我是大家的林语冰。

00. 观前须知

去年，全球首个 HTML 调研问卷正式开放，关注过我的老粉应该都收到相关资讯了，当时世界各地的前端开发者纷纷填写问卷参与调研。

最近，HTML 全球现状调研的结果正式揭晓，这也是有史以来第一个 HTML 现状调查的结果。

总体而言，本次调研完美谢幕，超过 20_000 名受访者踊跃参与，并耐心回答了 90+ 个问题！官方由衷希望本次调研的所有统计数据将在未来几年成为 Web 开发社区的风向标。

为了防止大家错过史上第一次 HTML 调研的结果，或者没空解读官网的可视化统计数据页面，在本文中，我们将一起快速回顾本次调研中的有趣发现。

免责声明

本文属于是语冰的直男翻译了属于是，略有删改，仅供粉丝参考。英文原味版请传送 Here’s What We Learned From the First State of HTML Survey。

01. 人气爆棚的 datalist 元素

今年调查的一个关键创新在于，受访者不仅可以具体说明它们对某个功能的体验（“使用过它”、“听说过它”、“从未听说过它”），​​还可以具体说明它们的感受。换而言之，它们对某个 HTML 功能是否满意，或者感不感兴趣等等。

正向反馈勇夺第一的功能是 datalist，正向反馈高达 55.4%，负面反馈仅仅 3.9%，其余反馈则不偏不倚。

datalist 其实是一个不太新的元素，2019 年左右它就被浏览器广泛支持。它允许你创建一个无需任何 JS 的自动完成/提前输入组件。虽然它可能不像经典的 JS 实现那么灵活，但它仍然是一种便捷方案，且易于正确使用！

其他人气爆棚的功能还有 Popover API 等，dialog 对话框元素，这两者都和 datalist 大同小异，因为它们模拟的都是开发者长期以来原本依赖 JS 实现的原生功能。

换而言之，尽管我们中的许多人在过去十年中已经接受了 JS 前端框架，但最终我们仍然宁愿让浏览器原生提供相关功能！

02. 口诛笔伐的表单元素

虽然受访者表达了对许多 Web API 的喜爱，但它们毫不掩饰对某个领域的不满：表单。

我们询问受访者在 HTML 表单方面的痛点是什么，这个问题收集了超过 11_000 个回复，这里的回复指的是言论自由的差评，而不仅仅是简单勾选一下喜欢或讨厌表单元素！

那么大家为何对表单如此义愤填膺呢？超过 3_600 条回复中，位列第一的“差评之王”是样式，或者说缺乏样式。

select 元素尤其是一个人人喊打的罪魁祸首，毕竟样式对于这样一个无所不在的 UI 元素而言意义非凡。这就是为什么有人正在直接提议一种新型的、更易于设计的替代元素。

除了样式问题之外，受访者还共享了它们对其他表单输入元素的各种差评，其中首当其冲的是 <input type="date" />。正如一位受访者所言，“日期输入并非真正可用，也并非完全可访问”。

表单验证也是一个不容忽视的痛点，尤其是在实现更高级的业务场景时，例如根据一个字段的值按条件验证另一个字段。

值得一提的是，当受访者被问及由于浏览器差异或缺乏支持，而无法使用的现有 HTML 功能或浏览器 API时，表单输入元素也赫然在列。

03. 存在感低下的 Web Components

当提及 Web Components 时，开发者社区大致三权分立。

第一阵营认为，Web Components 乃大势所趋，它们迟早会卷死前端框架。

第二阵营认为，Web Components 是一个注定失败的举措，尤其是当前端框架已经提供了大同小异的功能，甚至更多功能时。

最后，第三阵营一直在悄咪咪地到处使用 Web Components，只要它们能奏效。

平心而论，第二阵营在调查中更有数据支撑，许多人抱怨 Web Components 缺乏与 React、Vue 和其他框架的互操作性；甚至质疑它们的必要性。差评最多的前 5 个功能中，有 3 个也与 Web Components 息息相关。

对于使用 Web Components 的开发者而言，样式和定制再次成为一个大问题，这表明我们可能需要更多现成的解决方案；但我们仍然希望能够让 Web Components 符合我们的需求。

然而，与 Web 平台的其他部分一样，Web Components 也在与时俱进。在它们的时代到来之前，只是临时使用它们也未尝不可。

04. 备受期待的功能

受访者被问到，如果它们有权选择任何内容，它们会添加哪些元素到 HTML 中，排名前三的结果是 datatable（即带有排序、过滤等控件的表）、tab 选项卡和 toggle/switch 切换开关。

这很有趣，因为尽管亮暗模式切换正在成为一种趋势，这三种组件在静态站点中也相对较少，但在任何类型的仪表板或应用程序中都司空见惯了。

这让人回想起文档和应用程序之间古老的二分法，尽管我们早已纠正了 HTML 只适合描述静态内容的想法，但这些元素仍然缺失的事实表明，我们尚未完全接受 HTML 作为一个以应用程序为中心的平台。

05. 分久必合

五年前，你可能听说过某个精神小伙写了一篇具有里程碑意义的文章，名为《前端大鸿沟》（The Great Divide），其中提及了一种前端合久必分的说法：

• “前端的前端”：HTML/CSS
• “前端的后端”：JavaScript

诚然，本次调研的受众可能无法代表整个前端行业，大约 12% 的受访者是之前参与了另一个 JS 现状调查，然后才参与这项 HTML 调查。

但至少根据统计的数据，这种鸿沟可能并不像以前想象的那么明显。举个栗子，大约 22% 的受访者使用了 Next，当被问及它们如何在编写 HTML/CSS 和 JS/TS 代码之间分配时间时，59% 的受访者表示它们花了大半时间来编写 JS。

至少根据我的个人经验，即使你主要在“前端的前端”工作，你处理的 HTML 和 CSS 也可能由某种 JS 框架生成。这意味着，“前端的前端”和“前端的后端”分久必合。

想象这种趋势如何演变将会很有趣。随着 HTML 获得更多功能，覆盖“前端的两端”的需求会减少吗？或者，“前端的后端”的开发者可能会意识到，他们根本不需要 CSS-in-JS 之类的框架，而可以拥抱原生 CSS。

参考文献

1. Blog：frontendmasters.com/blog/state-…
2. HTML：2023.stateofhtml.com/en-US
3. select：open-ui.org/components/…

粉丝互动

本期话题是：你最喜欢或最讨厌哪种 HTML 功能，比如表单元素或 Web Components；或者最想要哪种新功能？你可以在本文下方自由言论，文明科普。

欢迎持续关注“前端俱乐部”，给前端以福利，给编程以复利。

坚持阅读的小伙伴可以给自己点赞！谢谢大家的点赞，掰掰~