您目前可以使用的 Baseline 功能

了解 Baseline 中的一些功能。

Mariko Kosaka

网络在不断发展，浏览器也在不断更新，以便开发者获得新的工具，在该平台上进行创新。以前需要辅助库的功能现已成为 Web 平台的一部分，并在所有浏览器上受支持，同时还提供了更短或更简单的设计元素编码方式。

虽然这种不断的演变和适应很有帮助，但也可能会带来混淆。要应对所有这些更新，可能并非易事。作为开发者，我们会问一些问题，例如“所有浏览器引擎何时会支持这项新功能？”“我何时可以真正开始在生产代码中使用这些功能？”“我们应该支持旧版浏览器多长时间？”

正确答案是“取决于具体情况”。具体需要和可用的工具取决于您的用户群、技术栈、团队结构和受支持的设备。但我们都同意一点，当前的网络环境可能会使我们难以做出这些决定。

Chrome 团队正在与其他浏览器引擎和网络社区合作，以便提供更清晰的说明。这包括我们在 Interop 2023 等项目中开展的工作，这些工作有助于提升一组关键功能的互操作性。但过去几年推出的功能呢？我们大约两年前了解的实验性功能是否已可供使用？

在本文中，我想重点介绍一下目前适用于过去两个主要版本的所有主流浏览器引擎的一些功能。我们认为，大多数开发者都会认为达到此最低要求的功能是安全的，我们将此功能集称为“基准”。如需了解详情，请点击此处查看基准组的公告。

对话框元素

<dialog> 元素是一种新的 HTML 元素，用于创建弹出式窗口和模态窗口等对话框提示。

浏览器支持

• 37
• 79
• 98
• 15.4

来源

如需使用它，请定义模态元素，然后对对话框元素调用 showModal() 方法以打开对话框。

<dialog id="d">
  <form method="dialog">
    <p>Hi, I'm a dialog.</p>
    <button>ok</button>
  </form>
</dialog>

<button onclick="d.showModal()">
  Open Dialog
</button>

作为原生 HTML 元素，它内置了焦点管理、标签页跟踪和保持堆叠上下文等功能。如需了解详情，请参阅构建对话框组件。

单个 CSS 转换属性

使用 CSS 转换是一种高效的方式，可为您的网站添加动画效果。
您可能熟悉在一条代码中编写包含三个属性的 CSS 转换。
现在，您可以使用单独的转换属性单独指定转换属性。在编写复杂的关键帧动画时，这非常有用。

.target {
  translate: 50% 0;
  rotate: 30deg;
  scale: 1.2;
}

浏览器支持

• 104
• 104
• 72
• 14.1

来源

如需详细了解此变更，请参阅使用各个转换属性对 CSS 转换进行更精细的控制。

新的视口单元

在移动设备上，视口大小会受到是否存在动态工具栏的影响。
有时，您会看到网址栏和导航工具栏，但有时这些工具栏会完全收起。
视口的实际大小会因工具栏是否可见而异。
svh 和 lvh 等新的视口单位可让 Web 开发者在为移动设备设计时实现更精细的控制。如需了解详情，请参阅大型、小型和动态视口单位一文。

浏览器支持

• 108
• 108
• 101
• 15.4

JavaScript 中的深层复制

过去，为了创建不引用原始对象的对象的深层副本，一种常用的黑客技巧是将 JSON.stringify 与 JSON.parse 结合使用。这是一种非常常见的黑客攻击方式，因此 V8（Chrome 的 JavaScript 引擎）大幅提升了此技巧的性能。不过，在使用 structuredClone 时，您无需再使用此技巧。

const original = {id: 0, prop: {name: "Tom"}}

/* Old hack */ 
const deepCopy = JSON.parse(JSON.stringify(original));

/* New way */
const deepCopy = structuredClone(original);

浏览器支持

• 98
• 98
• 94
• 15.4

来源

如需了解详情，请参阅使用 structuredClone 在 JavaScript 中深层复制。

:focus-visible 伪类

作为 Web 开发者，我们都熟悉在使用键盘浏览网页或点击输入元素时显示的“焦点圈”。这是无障碍功能的必要属性，但有时会妨碍不同用户的视觉设计。:focus-visible CSS 伪类用于检查浏览器是否认为焦点应可见。现在，您可以仅为应显示焦点时指定样式。

/* focus with tab key */
:focus-visible {
    outline: 5px solid pink;
}

/* mouse click */
:focus:not(:focus-visible) {
    outline: none;
}

浏览器支持

• 86
• 86
• 85
• 15.4

来源

如需了解详情，请参阅 “学习 CSS”中的“焦点”部分。

TransformStream 接口

借助 Streams API 的 TransformStream 接口，您可以将流管道到另一个流。

例如，您可以从一个位置流式传输数据，然后在传输数据时将数据流压缩到另一个位置。使用 Fetch API 流式传输请求一文将详细介绍此示例用例。

浏览器支持

• 67
• 79
• 102
• 14.1

来源

小结

还有许多功能最近已变得可互操作，并且可以在 Web 平台上稳定使用。今后，我们将与 WebDX 社区小组合作，进一步阐明这些基准功能集。如需了解最新详情，请访问 web.dev/baseline。

如果您想随时了解最新动态，我们的团队会在某项功能实现互操作性时发布相关文章，并每月发布一次有关 Web 平台动态的更新，从实验性功能到新实现互操作性的功能，应有尽有。

我们一直在思考自己所做的是否对您有所帮助，或者您是否需要其他类型的支持，因此请通过 WebDX 社区群组与我们联系。