此页面由 Cloud Translation API 翻译。

您目前可以使用的 Baseline 功能

了解 Baseline 中的一些功能。

Mariko Kosaka

发布时间：2023 年 5 月 10 日

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

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

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

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

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

对话框元素

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

如需使用它，请定义模态元素，然后对对话框元素调用 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;
}

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

新的视口单元

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

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);

如需了解详情，请参阅使用 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;
}

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

`TransformStream` 接口

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

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

小结

还有许多功能最近已变得可互操作，并且可以在 Web 平台上稳定使用。今后，我们将与 WebDX 社区小组合作，进一步阐明这些基准功能集。如需了解最新动态，请参阅基准页面。

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

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