此页面由 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 上的“View Transitions”文档。

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