发布时间:2025 年 3 月 31 日
又一个月过去了,自上次发布基准月度数据总结以来,发生了很多事情!在本期中,我们将回顾 web.dev 上发布的一些文章、已经推出的一些基准新功能,以及社区中的一些工具更新。
ESLint 0.6.0 已发布
我们最近发布了有关 ESLint 推出 CSS lint 支持的文章。此次发布的功能包括一个新的 ESLint 规则 require-baseline
,用于 lint 您在项目中使用的 CSS 功能,以及这些功能是否达到了特定的基准阈值。
ESLint 最近发布了 @eslint/css
软件包 0.6.0 版,其中包含一项重要的新更新,即将 require-baseline
规则重命名为 use-baseline
。虽然这项更新看起来很小,但它可以提高规则的可读性。此版本中还包含一些其他重要功能和 bug 修复,例如 use-baseline
规则新增了对嵌套 CSS 块进行 lint 检查的功能。如果您使用的是旧版 @eslint/css
,请查看此更新!
如何查询网站平台信息中心
本月早些时候,我们发布了一篇介绍如何查询网站平台信息中心的文章。您可以通过其前端以及通过 HTTP API 查询此信息中心。这对于基准工具可能很有用,因为您可以查询该 API 以查找已达到特定基准阈值的功能。
如果您需要快速获取特定功能的相关信息,此 API 会非常有用。例如,您可以使用此类工具编写脚本,以便在某个时间间隔内告知您哪些功能最近已变为“新推出的基准版”或“广泛推出”。如果这对您有用,请阅读这篇文章!
如何看待基准和 polyfill
基准测试的使命是明确指出您可以安全使用哪些功能,但即使如此,您仍然需要考虑如何以对您的 Web 应用有意义的方式采用这些功能。而多重填充就是其中的重要环节。基准不会在判断功能是“新推出”还是“广泛推出”时考虑 polyfill,也不会尝试告知您是否应使用 polyfill。此决定因应用而异,但是一项重要考量因素!
我们最近发布了一篇关于如何看待基准和 polyfill 的文章,我们认为该文章提供了一个有用的框架,可帮助您了解如何使用它们。我们希望,当功能成为“新基准”或“广泛可用”时,polyfill 的必要性会降低。毫无疑问,polyfill 是开发工具箱中非常实用的工具,但它们也有缺点:它们可能会对网站的性能产生负面影响,在某些情况下,甚至可能会导致无障碍问题。希望本指南能帮助您解决这个棘手的问题!
contenteditable="plaintext-only"
现已成为基准
借助 HTML 元素上的 contenteditable
属性,用户可以像更改文本字段一样更改其内容。例如,这意味着您可以将该属性放置在 <p>
元素上,用户可以像与 <textarea>
互动一样与其互动。在某些用例中,使用 contenteditable
比使用典型的表单元素更有优势。
不过,用户会将内容粘贴到可编辑元素中,而他们粘贴的内容可能会包含富文本格式,这可能会给只想将未格式化的文本粘贴到字段中的用户带来糟糕的体验。contenteditable="plaintext-only"
属性/值组合可防止这种情况发生,并且最近已成为“新建基准”的选项。如需了解详情,请参阅此公告帖子,了解如何为只想将文本粘贴到内容中而无需其他任何内容的用户提供更好的编辑体验。
Intl.DurationFormat
现已成为基准
您可能在某个时候访问过某个网站,并在其中看到过一些文字,用于表示某个事件发生前或发生后的时间间隔,通常以字符串的形式显示,例如“2 天、6 小时、3 分钟”。此类数据对于传达任何数量的及时信息非常有用,但通常由库提供。此外,您可能还希望以多种语言输出这些信息。
介绍 Intl.DurationFormat
,这项国际化功能最近已成为 Baseline 新推出的功能。使用 Intl.DurationFormat
类,您可以将一个对象传递给其构造函数,其中包含您要格式化为字符串的时间单位,并且可以使用您能想到的几乎任何语言:
const duration = {
years: 1,
hours: 20,
minutes: 15,
seconds: 35
};
// English output: '1 year, 20 hours, 15 minutes, 35 seconds'
new Intl.DurationFormat('en', { style: 'long' }).format(duration);
// German output: '1 Jahr, 20 Stunden, 15 Minuten und 35 Sekunden'
new Intl.DurationFormat('de', { style: 'long' }).format(duration);
// Spanish output: '1 año, 20 horas, 15 minutos y 35 segundos'
new Intl.DurationFormat('es', { style: 'long' }).format(duration);
令人兴奋的是,如果您的应用依赖于库来设置此类字符串格式,您很快就能无需库即可执行此操作,从而为用户节省了几千字节。如需了解详情,请参阅有关 Intl.DurationFormat
的公告博文,了解如何充分利用这项实用的新功能!
2025 年 W3C 分组讨论日的基准
近期,W3C 举办了 2025 年分组讨论日,成员们就各种主题进行了演讲,并在 3 月 26 日提供了有关基准的有用会话。
如果您刚接触基准组,本课程将为您提供简要概览。该文档介绍了基准的基本概念,例如“新推出”和“广泛提供”概念,但也介绍了这些定义是如何由数据决定的,从 browser-compat-data
开始,一直到 web-features
数据,这些数据有助于我们确定哪些功能达到了哪个基准阈值。
如果您错过了本次会议,也不用担心!会议的幻灯片已发布,如果您对会议内容感到好奇,不妨查看一下。
大功告成!
本月月度数据总结不仅标志着本月的结束,也标志着本季度的结束。如果您错过了之前的版本,请查看 1 月和 2 月版本,快速了解今年第一季度与基准版相关的所有动态。一如既往,如果我们漏掉了与基准相关的任何信息,请告诉我们,我们会确保在日后的版本中添加这些信息。一个月后见!