以下是一些注意事項:
- 三個新的 CSS 功能,可讓您輕鬆新增流暢的進入和離開動畫。
- 透過陣列分組功能,計算較高順序的資料集。
- 開發人員工具可讓您更輕鬆地執行本機覆寫。
- 還有不少更多應用程式。
我是 Adriana Jara我們來深入說明 Chrome 117 為開發人員推出的新功能。
新增用於進入及退出動畫的 CSS 功能。
這三項新的 CSS 功能已完成組合,可讓您輕鬆新增進入和離開動畫,並且流暢地與頂層可關閉元素 (例如對話方塊和彈出式視窗) 來回播放。
第一項功能是 transition-behavior
。如要轉換離散屬性 (例如 display
),請使用 transition-behavior
的 allow-discrete
值。
.card {
transition: opacity 0.25s, display 0.25s;
transition-behavior: allow-discrete; /* Note: be sure to write this after the shorthand */
}
.card.fade-out {
opacity: 0;
display: none;
}
接著,@starting-style
規則是用來為 display: none
和頂層進入項目的動畫製作動畫。使用 @starting-style
套用瀏覽器在網頁開啟元素前可以查詢的樣式。
/* 0. BEFORE-OPEN STATE */
/* Starting point for the transition */
@starting-style {
.item {
opacity: 0;
height: 0;
}
}
/* 1. IS-OPEN STATE */
/* The state at which the element is open + transition logic */
.item {
height: 3rem;
display: grid;
overflow: hidden;
transition: opacity 0.5s, transform 0.5s, height 0.5s, display 0.5s allow-discrete;
}
/* 2. EXITING STATE */
/* While it is deleting, before DOM removal in JS, apply this
transformation for height, opacity, and a transform which
skews the element and moves it to the left before setting
it to display: none */
.is-deleting {
opacity: 0;
height: 0;
display: none;
transform: skewX(50deg) translateX(-25vw);
}
最後,如要將 popover
或 dialog
從頂層淡出,請將 overlay
屬性加入轉場效果清單。在轉場效果或動畫中加入疊加元素,即可與其他地圖項目一同製作動畫,並確保動畫呈現在頂層圖層。看起來會更順暢。
[open] {
transition: opacity 1s, display 1s allow-discrete;
}
[open] {
transition: opacity 1s, display 1s allow-discrete, overlay 1s allow-discrete;
}
歡迎參考四種全新的 CSS 功能,流暢進入和離開動畫,進一步瞭解如何運用這些功能改善動態效果的使用者體驗。
陣列分組
在程式設計中,陣列分組是極為常見的作業,最常在我們使用 SQL 的 GROUP BY 子句和 MapReduce 程式設計時出現 (這最好視為 map-group-reduce)。
將資料合併成群組,可讓開發人員計算優先順序較高的資料集。例如同類群組的平均年齡或網頁的每日 LCP 值。
陣列分組功能會新增 Object.groupBy
和 Map.groupBy
靜態方法,以啟用這些情境。
groupBy
會針對可疊代項目中的每個元素,分別呼叫一次提供的回呼函式。回呼函式應傳回指出關聯元素群組的字串或符號。
在以下範例中,來自 MDN 說明文件中的一個產品陣列,且使用 groupBy
方法傳回按類型分組的產品。
const inventory = [
{ name: "asparagus", type: "vegetables", quantity: 5 },
{ name: "bananas", type: "fruit", quantity: 0 },
{ name: "goat", type: "meat", quantity: 23 },
{ name: "cherries", type: "fruit", quantity: 5 },
{ name: "fish", type: "meat", quantity: 22 },
];
const result = Object.groupBy(inventory, ({ type }) => type);
/* Result is:
{
vegetables: [
{ name: 'asparagus', type: 'vegetables', quantity: 5 },
],
fruit: [
{ name: "bananas", type: "fruit", quantity: 0 },
{ name: "cherries", type: "fruit", quantity: 5 }
],
meat: [
{ name: "goat", type: "meat", quantity: 23 },
{ name: "fish", type: "meat", quantity: 22 }
]
}
*/
詳情請參閱 groupBy
說明文件。
開發人員工具中的本機覆寫設定已簡化。
本機覆寫功能現已簡化,您可以在無法存取「網路」面板中,輕鬆模擬遠端資源的回應標頭和網路內容。
如要覆寫網路內容,請開啟「網路」面板,在請求上按一下滑鼠右鍵,然後選取「覆寫內容」。
如果已設定本機覆寫值,但停用,開發人員工具會加以啟用。如果您尚未設定,開發人員工具會在頂端的動作列中提示您。選取要將覆寫設定儲存在哪個資料夾,並允許開發人員工具存取該資料夾。
覆寫設定完成之後,開發人員工具會導向「來源」 >「覆寫」 >「編輯器」,讓您覆寫網頁內容。
請注意,在「網路」面板中,已覆寫的資源會以 表示。將滑鼠遊標懸停在圖示上,即可查看覆寫項目。
歡迎查看 DevTools 新功能,瞭解所有詳細資訊和更多 Chrome 117 版開發人員工具。
還有更多獎品等著您!
當然還有許多其他事物。
預計的
grid-template-columns
和grid-template-rows
預期subgrid
值已納入 Chrome 中。隨著
unload
事件淘汰,我們也提供WebSQL
淘汰試用和開發人員試用方案。這個版本應該推出適用於 bfcache 的
notRestoredReasons
API (如 Chrome 116 專用影片所述)。
其他資訊
以上內容僅涵蓋部分重點功能。如要瞭解 Chrome 117 的其他變更,請點選下方連結。
- Chrome 開發人員工具新功能 (117)
- Chrome 117 淘汰和移除
- 適用於 Chrome 117 的 ChromeStatus.com 更新
- Chromium 原始碼存放區變更清單
- Chrome 發布時間表
訂閱
如要隨時掌握最新資訊,請訂閱 Chrome Developers YouTube 頻道,每當我們推出新影片時,您就會收到電子郵件通知。
Yosoy Adriana Jara., 到了 Chrome 117 推出後,我就會告訴你 Chrome 有什麼新功能!