以下是一些注意事項：
- 使用 View Transitions API，在單頁應用程式中建立精緻的轉場效果。
- 支援 CSS 顏色等級 4，讓色彩更上一層樓。
- 在樣式面板中發掘新工具，充分運用新的色彩功能。
- 還有許多其他功能。
我是 Adriana Jara。接下來，我們將深入探討 Chrome 111 版開發人員的新功能。
View Transitions API。
在網路上建立流暢的轉場效果是一項複雜的工作。View Transitions API 可擷取檢視畫面，並允許 DOM 變更，不必在狀態之間重疊，藉此簡化精緻轉場效果的建立作業。
預設的檢視畫面轉場效果是交叉淡出，以下程式碼片段會實作這項體驗。
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 值。
以下列舉幾個使用 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 充分運用高解析度色彩。
新的色彩工具。
Devtools 提供新功能，可支援 CSS 顏色第 4 級規格。
「Styles」窗格現已支援規格中列出的 12 個新色彩空間和 7 個新色域。以下是使用 color()、lch()、oklab() 和 color-mix() 的 CSS 顏色定義範例。
使用 color-mix() 時，可將某種顏色的百分比混合到另一種顏色，您可以在「Computed」窗格中查看最終顏色輸出結果 
此外，色彩挑選器也支援所有新色彩空間，並提供更多功能。例如，按一下「color(display-p3 1 0 1)」的色票。我們也新增了色域邊界線，以便區分 sRGB 和 Display P3 色域，讓您更清楚瞭解所選顏色的色域。
顏色挑選器也支援在不同色彩格式之間轉換顏色。
如要進一步瞭解如何在 devtools 中偵錯顏色和其他新功能，請參閱這篇文章。
還有其他眾多資源！
當然，還有更多功能。
- CSS 新增了三角函數、額外的根字型單位，並擴充第 n 個子項擬似選擇器。
- Document Picture in Picture API 處於來源試用階段
previousslide和nextslide動作現已納入 Media Session API。如要查看示範影片，請按這裡。
延伸閱讀
這份報告僅涵蓋部分重點。請參閱下列連結，瞭解 Chrome 111 的其他異動。
- Chrome 開發人員工具 (111) 的新功能
- Chrome 111 淘汰和移除項目
- Chrome 111 版的 ChromeStatus.com 更新
- Chromium 來源存放區變更清單
- Chrome 發布時程表
訂閱
如要隨時掌握最新消息，請訂閱 Chrome 開發人員 YouTube 頻道，這樣一來，我們發布新影片時，你就會收到電子郵件通知。
我是 Adriana Jara，Chrome 112 一推出，我就會在這裡告訴你 Chrome 有哪些新功能！