View Transitions API

在Web上创建平滑的过渡效果是一项复杂的任务。View Transitions API 可以通过快照视图并允许DOM在状态之间没有重叠来简化创建精美的过渡效果。

使用 View Transition API 创建的过渡效果。尝试演示网站-需要 Chrome 111+。

storage.googleapis.com/web-dev-upl…

默认的视图过渡是一个淡入淡出的效果，下面的代码片段实现了这个效果。

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() 的回调函数。这是DOM更改的地方。然后，API 捕获页面的新状态。

请注意，该 API 适用于单页应用程序（SPA），但正在实现对其他模型的支持。

有关此API的许多细节，请在我们的文章中了解更多示例和细节，或在 MDN 中探索 View Transitions 文档。

CSS Color Level 4

使用 CSS Color Level 4，CSS 现在支持高清显示，可以指定来自高清色域的颜色，并提供了具有专业化特性的颜色空间。

简而言之，它意味着可以选择更多的颜色！您可能认为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);
}