本頁面由 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 上的 View Transitions 說明文件。

CSS 顏色層級 4。

有了 CSS 色彩等級 4，CSS 現在支援高解析度螢幕，可指定 HD 色域的顏色，同時提供專門的色彩空間。

簡而言之，這意味著可選取的顏色增加了 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 充分運用高畫質色彩。