了解 Baseline 中包含的部分功能。
网络在不断发展，浏览器也在不断更新，以便为开发者提供新的工具，以便在平台上进行创新。以前需要帮助程序库的功能已成为 Web 平台的一部分，并支持所有浏览器，并提供了更短或更轻松的设计元素编码方式。
这种持续不断的进化和适应虽然有帮助，但也可能会带来困惑。浏览所有这些更新并非易事。作为开发者，我们会遇到这样一些问题：“什么时候所有浏览器引擎都支持这项新功能？”“我何时才能真正开始在正式版代码中使用这些功能？”"我们应该支持多久以前的浏览器？"
正确答案是“视情况而定”。具体需要什么以及怎样可以使用，这实际上取决于您的用户群、技术栈、团队结构，以及支持的设备。但是，我们都一致认为，当前的网络环境可能使我们难以做出此类决定。
Chrome 团队正在与其他浏览器引擎和网络社区开展协作，以便提供更加清晰的说明。这包括我们在 Interop 2023 等项目的开展工作，这有助于改善一系列关键功能的互操作性。但是，过去几年推出的功能呢？我们大约两年前学到的实验性功能是否可以投入使用？
在这篇博文中，我想重点介绍一些过去两个主要版本现在适用于所有主要浏览器引擎的功能。这是我们认为大多数开发者认为某项功能可以安全使用的一个临界点，这也是我们称之为 Baseline 的功能集。如需了解详情，请点击此处查看 Baseline 公告。
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 等新视口单元让网站开发者能够更精细地控制。如需了解详情，请参阅大型、小型和动态视口单元一文。
浏览器支持
- 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);
如需了解详情，请参阅使用结构化摘要克隆在 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 发送流式传输请求一文对此示例用例进行了详细介绍。
小结
还有许多其他功能最近变得可互操作且稳定，可以在网络平台上使用。今后，我们将与 WebDX Community Group 合作，进一步阐明这些 Baseline 功能集。请访问 web.dev/baseline，持续了解详情。
如果您想及时了解最新动态，我们的团队会在当一项功能变得可互操作时发布文章，并发布有关 Web 平台动态的每月更新，从实验性功能到新推出的互操作功能。
我们总是想知道我们所做的事情是否对您有所帮助，或者您需要不同类型的支持，因此请通过 WebDX Community Group 与我们联系。