此页面由 Cloud Translation API 翻译。

Chrome 111 的新变化

Adriana Jara

以下是您有必要知道的信息：

使用 View Transitions API 在单页应用中创建精美的转场效果。
借助对 CSS 颜色级别 4 的支持，让颜色更上一层楼。
在样式面板中探索新工具，充分利用新的颜色功能。
还有许多更多内容。

我是 Adriana Jara。我们来深入了解下，看看 Chrome 111 会为开发者带来哪些新变化。

View Transitions API。

在网页上创建平滑过渡是一项复杂的任务。此处的 View Transitions API 通过拍摄视图快照并允许 DOM 在不重叠的状态之间发生重叠，从而简化了精美过渡的创建过程。

使用 View Transition API 创建的转场效果。试用演示版网站 - 需要使用 Chrome 111 或更高版本。

默认的视图过渡是淡入淡出，以下代码段实现了这种体验。

function spaNavigate(data) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow(data);
    return;
  }

  // With a transition:
  document.startViewTransition(() => updateTheDOMSomehow(data));
}

当调用 .startViewTransition() 时，该 API 会捕获页面的当前状态。

完成后，系统会调用传递给 .startViewTransition() 的 callback。这就是 DOM 发生变化的地方。然后，该 API 会捕获网页的新状态。

请注意，该 API 是针对单页应用 (SPA) 发布的，但也在实现对其他模式的支持。

有关此 API 的许多详细信息，请参阅我们包含示例和详细信息的文章了解详情，或者浏览在 MDN 上查看转换文档。

CSS 颜色级别 4。

使用 CSS 颜色级别 4，CSS 现在支持高清显示，指定高清色域的颜色，同时提供专用颜色空间。

简而言之，这意味着多出 50% 的颜色可供选择！你以为 1600 万种颜色听起来不错啊。我也想。

一系列图片在广色域和窄色域之间转换，展示了色彩鲜明度及其效果。
亲自试用

该实现包含 color() 函数；该函数可用于任何使用 R、G 和 B 通道指定颜色的颜色空间。color() 首先接受颜色空间参数，然后接受一系列 RGB 通道值，以及一些 alpha 值（可选）。

以下是将颜色函数用于不同颜色空间的一些示例。

.valid-css-color-function-colors {
  --srgb: color(srgb 1 1 1);
  --srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
  --display-p3: color(display-p3 1 1 1);
  --rec2020: color(rec2020 0 0 0);
  --a98-rgb: color(a98-rgb 1 1 1 / 25%);
  --prophoto: color(prophoto-rgb 0% 0% 0%);
  --xyz: color(xyz 1 1 1);
}

如需更多文档，请参阅这篇文章，了解如何通过 CSS 充分利用高清颜色。