发布时间:2024 年 10 月 23 日
在本文中,您将了解如何在自己的网站上使用新的 <baseline-status>
Web 组件,以及在每次撰写或谈论 Web 平台功能时在演示文稿中使用基准徽标。
大多数开发者都曾有过这样的经历:搜索 Web 开发问题的解决方案,找到一篇介绍完美解决方案的文章,然后在最后才发现该解决方案只适用于一种浏览器。或者,您对大会演讲者介绍的某项功能感到兴奋,但后来发现它只是一项实验性功能。我们希望在 Chrome 开发者网站上改进这一点,因此在过去两年里,我们一直在向我们的文章中添加 MDN 中的兼容性数据。
不过,基准值可以让情况更加清晰。您可以查看某项功能是否已广泛提供(即“基准”),而不必检查各个浏览器版本,这样就可以放心地使用该功能。或者,您发现该功能是“新推出的 Baseline 功能”,因此可互操作,但作为一项新功能,您可能需要考虑回退策略。在 web.dev 上,我们已开始向部分页面添加新的基准状态组件,您可以在有关 CSS font-size-adjust 的博文中看到它。
将组件添加到您的网站
Web 组件不仅可供我们使用,我们很高兴能与您分享 <baseline-status>
组件。您可以使用此数据来显示您创建的内容的基准状态。您可以通过 npm 安装该组件,也可以从 CDN 预编译该组件 - 请参阅安装说明。安装后,显示功能的状态,如以下 font-size-adjust
的 HTML 所示。
<baseline-status featureId="font-size-adjust"></baseline-status>
然后,当功能从“仅限部分国家/地区提供”变为“新推出”再变为“面向所有国家/地区提供”时,该组件将自动更新。
找到 featureId
传入组件的 featureId
是 web-features 代码库中相应功能的名称。该组件会从通过Web 地图项项目收集的数据中获取地图项的状态。
添加 Baseline 徽标
如果您要发布印刷版或 PDF 文件,或者要在会议上展示内容,那么徽标可能有助于显示相应时间点的状态。网站平台状态信息中心可帮助您查看任何功能的基准状态。
您可以使用基准徽标,并将其下载为 PNG 和 SVG 格式,用于您的所有材料。
请告诉我们您在哪些位置使用基准
我们非常期待了解您在哪些方面使用了基准。创建一个 PR,并添加指向您在实际环境中使用该基准的链接。
您还有其他集成想法吗?
您是否有其他集成 Baseline 的方法? 您或许有开发者工具可以包含此信息,或者您的产品可以通过分享管理控制台使用的基准版本而受益。提出您的想法存在的问题,我们很乐意提供帮助。