您目前可以使用的 Baseline 功能

请仅了解 Baseline 中的部分功能。

Mariko Kosaka
X

网络在不断发展，浏览器也在不断更新，以便为开发者提供能够在平台上进行创新的新工具。以前需要帮助程序库的功能现已成为网络平台的一部分且在所有浏览器上均受支持，同时还可以用更短或更简便的方式对设计元素进行编码。

这种不断演变和适应固然很有帮助，但也可能会让人感到困惑。浏览所有这些更新并非易事。作为开发者，我们会有一些疑问，例如“所有浏览器引擎何时都支持这项新功能？”“我什么时候才能真正开始在我的生产代码中使用这些功能？”“对旧版浏览器的支持有多长？”

正确答案是“视情况而定”。需要哪些功能以及哪些功能可用实际上取决于您的用户群、技术栈、团队结构和支持的设备。但有一点我们都认同，那就是当前的网络形势可能会导致做出这些决定十分困难。

Chrome 团队正在与其他浏览器引擎和网络社区通力协作，让组织能够变得更加清晰明了。这包括我们开展的 Interop 2023 等项目，旨在帮助改进一系列关键功能的互操作性。那么，在过去几年中推出的功能呢？我们两年前学到的实验性功能现在可供使用吗？

在这篇博文中，我想重点介绍一下在前两个主要版本中，所有主要浏览器引擎现在都可以使用的一些功能。这是一个临界点，我们认为大多数开发者都会认为某项功能可以安全使用，这就是我们称之为 Baseline 的功能集。如需了解详情，请参阅此处发布的 Baseline 公告。

dialog 元素

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

浏览器支持

  • Chrome：37。 <ph type="x-smartling-placeholder">
  • Edge：79。 <ph type="x-smartling-placeholder">
  • Firefox：98。 <ph type="x-smartling-placeholder">
  • Safari：15.4. <ph type="x-smartling-placeholder">

来源

如需使用该对话框，请定义模态元素，然后通过对对话框元素调用 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 transform，是一种向您的网站添加动画效果的高效方法。
您可能比较熟悉，在一行中编写包含三个属性的 CSS 转换。
通过各个转换属性，您现在可以分别指定转换属性。这在编写复杂的关键帧动画时十分有用。

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

浏览器支持

  • Chrome：104。 <ph type="x-smartling-placeholder">
  • Edge：104。 <ph type="x-smartling-placeholder">
  • Firefox：72。 <ph type="x-smartling-placeholder">
  • Safari：14.1. <ph type="x-smartling-placeholder">

来源

有关此变更的深入说明，请参阅通过单个转换属性对 CSS 转换进行更精细的控制。

新增视口单元

在移动设备上，视口大小受动态工具栏是否存在影响。
有时您可以看到网址栏和导航工具栏，但有时这些工具栏会完全收回。
视口的实际尺寸因工具栏是否可见而异。
新的视口单元（例如 svh 和 lvh）可让 Web 开发者在针对移动设备进行设计时实现更精细的控制。有关详情，请参阅大、小和动态视口单元一文。

浏览器支持

  • Chrome：108。 <ph type="x-smartling-placeholder">
  • 边缘：108。 <ph type="x-smartling-placeholder">
  • Firefox：101。 <ph type="x-smartling-placeholder">
  • Safari：15.4. <ph type="x-smartling-placeholder">

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

浏览器支持

  • Chrome：98。 <ph type="x-smartling-placeholder">
  • Edge：98。 <ph type="x-smartling-placeholder">
  • Firefox：94。 <ph type="x-smartling-placeholder">
  • Safari：15.4. <ph type="x-smartling-placeholder">

来源

如需了解详情，请参阅使用结构化数据克隆在 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;
}

浏览器支持

  • Chrome：86。 <ph type="x-smartling-placeholder">
  • Edge：86。 <ph type="x-smartling-placeholder">
  • Firefox：85。 <ph type="x-smartling-placeholder">
  • Safari：15.4. <ph type="x-smartling-placeholder">

来源

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

TransformStream 接口

通过 Streams API 的 TransformStream 接口，可以将多个流互相传输起来。

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

浏览器支持

  • Chrome：67。 <ph type="x-smartling-placeholder">
  • Edge：79。 <ph type="x-smartling-placeholder">
  • Firefox：102。 <ph type="x-smartling-placeholder">
  • Safari：14.1. <ph type="x-smartling-placeholder">

来源

小结

还有许多其他功能最近变得具有互操作性和稳定性，可在 Web 平台上使用。今后，我们将与 WebDX 社区小组合作，进一步阐明这些 Baseline 功能集。如需持续了解详情，请访问 web.dev/baseline。

如果您想及时了解最新动态，我们的团队会在某项功能变为可互操作性时发布相关文章，并发布关于网络平台动态的每月动态，从实验性功能到新的可互操作性等方面的信息。

我们总是好奇我们能为您提供哪些帮助，或者如果您需要其他形式的支持，请通过 WebDX 社区群组与我们联系。