本頁面由 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 現在支援高畫質螢幕，可指定 HD 高畫質域的顏色，同時提供具備專業化作業的色域。

簡單來說，你可以再挑選 50% 的顏色！你似乎覺得 1,600 萬色人聽起來很豐富。我也是。

其中有一系列圖片在廣度和窄色的色調之間轉換，藉此呈現色彩鮮明度及其效果。
親自體驗

此實作項目包含 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 善用高畫質色彩。