HTML 和 CSS 中缺少什么?

今年,Chrome 团队在 CSS Day 大会上大放异彩。我们设立了 CSS 帮助台,回答与会者提出的问题,同时还设置了一块白板,询问大家认为 CSS 仍缺少哪些功能。在这篇博文中,我将分享提出该问题后得到的结果,同时也会请您填写这份简短的调查问卷,告诉我们您认为 HTML 和 CSS 缺少哪些功能。 您是否认同 CSS Day 参会者的观点?

贴满便条纸的白板。
CSS Day 的创意板。

前 10 个请求

我们要求参会者在便笺上写下自己的想法,然后将其添加到白板上。 用户还可以通过添加贴纸来为想法投票。以下是前 10 大功能。

支持设置输入源的样式

这是我们收到的票数最多的功能请求,共获得 21 票。您确实希望以一致的方式设置这些常见界面元素的样式。

Chrome 团队非常清楚这一点,因为这是开发者面临的一大痛点,我们正在努力为开发者打造更好的解决方案。例如,可自定义的选择元素旨在提供一种选择启用新样式行为的方式。然后,您可以执行添加图片或为选项添加更精细的样式等操作。这种方法的优点是,它会回退到常规的选择菜单,从而实现渐进式增强。

视觉上处于隐藏状态

在 CSS Day 上,此请求获得了 19 票,是第二受欢迎的请求。该请求旨在提供一种仅供屏幕阅读器使用的内容添加方式。这可能是一个 HTML 元素,其中的内容不会显示,只会由屏幕阅读器读出。

目前,人们通常通过创建 .visually-hidden来隐藏内容,但仍允许屏幕阅读器访问该内容。

虽然这是一个热门请求,但也有人认为不应实现此功能。如需了解详情,请参阅视觉上隐藏的内容是一种需要解决而非保留的黑客行为以及有关 CSS WG 问题 560 的讨论。

overflow: hidden 内部的 position:sticky

此请求获得了 16 票。目前,只有当所有父级都是 overflow: visible 时,position: sticky 才会起作用。

有一个公开问题(自 2017 年起)要求实现此功能,虽然现在可能不太需要使用 overflow: hidden 来清除浮动元素,但该帖子中详细介绍了许多其他应用场景。

动画效果:height: auto

在 12 票中,许多与会者希望动画效果为 height: auto。我们很高兴地宣布,CSS interpolate-size 属性和 calc-size() 函数即将登陆 Web 平台。这些功能将从 Chrome 129 开始提供。 我们将在日后的博文中详细介绍这些功能。

其他输入源类型

HTML5 为 <input> 元素带来了许多不同的类型,例如电子邮件地址的 type="email" 或范围滑块的 type="range"。 在 CSS Day 上,我们收到了 10 票,希望增加更多此类类型,例如双范围或使用自定义数据列表进行自动补全。

CSS 中的真实随机数

另一个获得 10 票的请求是希望在 CSS 中实现真正的随机数。过去曾有人要求实现此功能,并针对随机的 animation-duration 进行了变通处理。

mixin 样式类

CSS 新增了许多之前在 CSS 预处理器中看到的功能,包括具有自定义属性的变量,以及现在的 CSS 嵌套。不过,可重用的 mixin 尚未成为该语言的一部分,但有 7 位 CSS Day 参会者很想看到它们。

CSS 工作组已通过一项决议,开始着手制定此功能的规范,您可以将自己的想法和使用情形添加到该问题的讨论中。

shadow DOM 中的全局样式

另一个有大量讨论串的应用场景是请求允许全局 CSS 样式在 shadow DOM 内应用,在 CSS Day 上有 6 人提出了此请求。此功能可让全局重置样式也应用于 Web 组件,并让单个 CSS 文件在网站的所有组件中发挥作用。请查看此用例摘要,并告诉我们您是否也希望使用此功能。

混合单位除法

有一项针对 Interop 2024 的提案,要求能够除以混合单位,例如 calc(100vw / 1px)。不过,该提案被认为过于宽泛,不适合 Interop 2024,但许多开发者(包括 CSS Day 的 6 位参与者)都希望看到该提案得以实现。

nth-letter

CSS 有许多伪元素,它们的作用就像您在某些内容部分周围添加了 span 元素一样。例如,::first-letter 伪元素用于定位应用到的块容器的第一行的第一个字母。

该列表中缺少 ::nth-letter,而您大约二十年来一直要求使用 ::nth-letter,因此我们知道这是 Web 开发者长期以来一直提出的要求。在 CSS Day 上,有 6 人为此功能投票,使其成为我们最想实现的十大功能中的最后一个。

您是否认同 CSS Day 的前 10 名?

我们很想听听更广泛的受众群体对这些问题的看法,您认为其中哪些问题最重要?如果没有,您希望在 CSS 和 HTML 中看到哪些其他功能?请填写这份简短的表单告知我们,我们会在另一篇博文中总结您的回答。