了解构成基准功能的部分功能。
发布时间：2023 年 5 月 10 日
Web 始终在发展，浏览器不断更新，为开发者提供在平台上创新的新工具。以前需要辅助库才能实现的功能现在成为 Web 平台的一部分，并在所有浏览器上得到支持，同时代码设计元素的方式也更简短或更轻松。
虽然这种持续的演变和适应很有帮助，但也可能带来困惑。要了解所有这些更新可能很困难。作为开发者，我们有这样的疑问：“所有浏览器引擎何时会支持这项新功能？”“我实际上什么时候可以开始在我的生产代码中使用这些功能？”“我们应该支持旧浏览器多久？”
真正的答案是“视情况而定”。需要什么以及什么是可用的，实际上取决于您的用户群、技术堆栈、您的团队结构和支持的设备。但是，我们都同意一件事，那就是当前的 Web 格局可能会使做出这些决策变得困难。
Chrome 团队正在与其他浏览器引擎和 Web 社区合作，以提高透明度。这包括我们对 Interop 2023 等项目的研究，该项目有助于提高一组关键功能的互操作性。但是，过去几年中推出的功能呢？我们两年前了解到的实验性功能是否已准备好使用？
在本文中，我想重点介绍过去两个主要版本的所有主要浏览器引擎现在都提供的一些功能。这是我们认为大多数开发者会认为某项功能可以安全使用的临界点，也是我们称之为基准功能的功能集。有关更多信息，请参阅此处的基准功能公告。
dialog 元素
<dialog> 元素是一个新的 HTML 元素，用于创建对话框提示，例如弹出窗口和模态框。
要使用它，请定义模态元素，然后通过在 dialog 元素上调用 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;
}
请查看Learn CSS 上的焦点部分以获取更多信息。
TransformStream 接口
Streams API 的 TransformStream 接口使将流管道连接到另一个流成为可能。
例如，您可以从一个位置流式传输数据，然后在数据传递时将数据流压缩到另一个位置。文章使用 Fetch API 流式传输请求将引导您完成此示例用例。
总结
Web 平台上最近变得可互操作且稳定使用的功能还有很多。展望未来，我们将与 WebDX 社区组合作，以提高这些基准功能集的透明度。有关新进展，请参阅基准功能页面。
如果您想保持最新状态，我们的团队正在发布文章在功能变得可互操作时，并发布关于 Web 平台正在发生的事情的每月更新，从实验性功能到新近可互操作的功能。
我们始终好奇我们正在做的事情是否对您有所帮助，或者您是否需要其他类型的支持，因此请通过 WebDX 社区组与我们联系。