以下是一些注意事項:
- 使用 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 的「查看轉換」說明文件。
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 善用高畫質色彩。
新的顏色開發人員工具。
開發人員工具新增支援 CSS 色彩等級 4 規格的新功能。
「Styles」窗格現在支援 12 種新的色彩空間,以及規格中列出的 7 個新色域。以下是利用 color()、lch()、oklab() 和 color-mix() 的 CSS 顏色定義範例。
使用 color-mix()
時,可將一定百分比的顏色混入另一個顏色中,您可以在「Computed」窗格 中查看最終色彩輸出內容
此外,顏色挑選器支援所有具備更多功能的新色空間。例如,按一下 color(display-p3 1 0 1) 的色塊。也新增了全形邊界線,區分 sRGB 和 display-p3 色域,讓您更清楚瞭解所選色彩的色域。
顏色挑選器也支援轉換不同色彩格式的顏色。
如要進一步瞭解如何偵錯開發人員工具中的顏色和其他新功能,請參閱這篇文章。
還有更多獎品等著您!
當然還有許多其他事物。
- 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 Developers YouTube 頻道,每當我們推出新影片時,您就會收到電子郵件通知。
我是 Adriana Jara,Chrome 112 推出後,我將立刻為您介紹 Chrome 的新功能!