Chrome 129 新功能

Pete LePage

以下是一些注意事項：

我是 Pete LePage。讓我們一起來看看 Chrome 129 為開發人員帶來哪些新功能。

使用 scheduler.yield() 拆分長時間的工作

長時間的作業會延遲瀏覽器回應使用者輸入內容的速度，讓使用者認為網站速度緩慢，並影響 INP 等重要成效指標。有了 scheduler.yield()，您就能將長時間的工作拆解為較小的部分，並透過明確地將控制權交還給主執行緒，提升回應速度。

可讓您告知瀏覽器：

「嘿！我要執行的工作可能需要一些時間，如果您需要繪製影格、回應使用者輸入內容，或執行其他重要工作，沒關係，我可以等待」

這張圖片說明如何透過分割工作來促進使用者互動。在頂端，長時間工作會阻斷事件處理常式，直到工作完成為止。在底部，分割的工作可讓事件處理常式提早執行。

請經常在 JavaScript 程式碼中加入下列程式碼行，讓瀏覽器有喘息空間，避免發生 INP 問題。

await scheduler.yield();

重要的是，這可讓程式碼的後續動作獲得優先處理，因此您不會因為產生 yield 而損失任何東西。建議您在任何較大的工作區塊之間的函式中，盡量使用 scheduler.yield()。

詳情請參閱「最佳化長時間工作」。

內在大小的動畫

CSS 動畫效果相當不錯，但通常需要明確的大小，因此不能使用 auto、min-content 或 fit-content 等內在大小關鍵字。

CSS 屬性 interpolate-size 可開啟一組新的動畫，這在使用內在大小設定關鍵字時是不可能的。

沒有 interpolate-size 時，下方影片中的按鈕沒有轉場效果。

加入 interpolate-size: allow-keywords 後，影片中的按鈕就會顯示精美的轉場動畫效果。

在 root 元素上指定 interpolate-size: allow-keywords，即可為整個網頁設定新行為。建議您在相容性無虞的情況下，盡量採取這種做法。

:root {
  interpolate-size: allow-keywords;
}

.item {
  height: auto;

  @starting-style {
    height: 0;
  }
}

為提供更精細的控制選項，CSS calc-size() 函式 (類似 calc()) 也支援對支援的內在大小設定關鍵字進行作業。執行版面配置計算時，size 關鍵字會評估為 calc-size-basis 的原始大小。

nav a {
  width: 80px;
  overflow-x: clip;
  transition: width 0.35s ease;

  &:hover {
    width: calc-size(auto, size);
  }
}

詳情請參閱「在 CSS 中使用 height: auto; (和其他內在大小設定關鍵字) 進行動畫效果」。

CSS 錨點位置異動

CSS 錨點定位功能已在 Chrome 125 中推出，但在 CSS 工作小組進行額外討論後，規格和實作方式有一些變更。如果您已使用 CSS 錨點位置，請盡快更新程式碼。

首先，inset-area 已重新命名為 position-area。這是較佳做法，因為 position- 的用詞可提醒您，這個屬性是套用至已定位的元素，而非錨點元素。

第二，position-try-options 已重新命名為 position-try-fallbacks。這有助於您記得，這些只是主要位置的備用選項，而主要位置是由基礎樣式決定。

最後，inset-area() 函式語法會從 position-try 中移除。因此，請改用 position-try-fallbacks: top 而非 position-try-fallbacks: inset-area(top)。

還有其他眾多資源！

當然，還有許多其他功能。

我們新增了 Intl 方法，可用於格式化時間長度，並支援多個語言代碼。

const l = "fr-FR";
const d = {hours: 1, minutes: 46, seconds: 40};
const opts = {style: "long"};
new Intl.DurationFormat(l, opts).format(d);
// "1 heure, 46 minutes et 40 secondes"

Web GPU 畫布現在可針對 HDR 圖片使用整個顯示範圍。

另外，也有一些可能會影響部分開發人員的淘汰和移除項目。

查看完整版本資訊。

延伸閱讀

這份報告僅涵蓋部分重點。如要瞭解 Chrome 129 中的其他異動，請參閱以下連結。

訂閱

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

我來代替 Adriana 為你服務，我是 Pete LePage。Chrome 130 一推出，我們就會在這裡告訴你 Chrome 的新功能！