Chrome 117 版新功能

Adriana Jara

以下是一些注意事項：

我是 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. 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;
}

/*  1. BEFORE-OPEN STATE   */
/*  Starting point for the transition */
@starting-style {
  .item {
    opacity: 0;
    height: 0;
  }
}

/*  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 說明文件。

開發人員工具中的本機覆寫設定經過簡化。

本機覆寫功能現在已簡化，您不必存取遠端資源，就能輕鬆從「網路」面板模擬回應標頭和網路內容。

如要覆寫網路內容，請開啟「網路」面板，在要求上按一下滑鼠右鍵，然後選取「覆寫內容」。

要求下拉式選單中的覆寫選項。

如果您已設定但停用本機覆寫，開發人員工具會啟用這些覆寫。如果尚未設定，開發人員工具會在頂端的動作列中提示您。選取要儲存覆寫內容的資料夾，並允許開發人員工具存取該資料夾。

選取資料夾，然後在頂端的動作列中允許存取權。

設定覆寫後，開發人員工具會帶您前往「來源」 >「覆寫」 >「編輯器」，讓您覆寫網頁內容。

請注意，在「網路」面板中，遭覆寫的資源會以 已儲存。 表示。將滑鼠游標懸停在圖示上，即可查看遭到覆寫的項目。

「網路」面板中要求旁邊的覆寫圖示。

如要瞭解詳情，以及 Chrome 117 中開發人員工具的相關資訊，請參閱開發人員工具新功能。

還有其他眾多資源！

當然還有許多其他功能。

延伸閱讀

這僅涵蓋部分重點。如要瞭解 Chrome 117 的其他異動，請參閱下方連結。

訂閱

如要掌握最新消息，請訂閱 Chrome 開發人員版 YouTube 頻道，這樣每當我們發布新影片，您就會收到電子郵件通知。

我是 Adriana Jara，Chrome 117 版一推出，我就會在這裡告訴你 Chrome 的新功能！