此页面由 Cloud Translation API 翻译。

Chrome 111 的新变化

Adriana Jara

以下是您需要知晓的相关信息：

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

我是 Adriana Jara。我们来深入了解一下 Chrome 111 中面向开发者的新功能。

View Transitions API。

在 Web 上创建流畅的转场效果是一项复杂的工作。 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 值。

以下是将 color 函数与不同颜色空间搭配使用的示例。

.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 充分利用高清颜色的文档。