Chrome 130 的新功能

Pete LePage

以下是一些注意事項：

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

文件子母畫面

當您想從瀏覽器分頁中彈出影片，以便在與其他網站或應用程式互動時持續觀看影片時，子母畫面 API 就非常實用。但它只適用於影片。

Spotify 的子母畫面視窗

使用文件子母畫面 API 可消除這項限制，因此您可以建立子母畫面視窗，控制內容。這類應用程式包括自訂影片播放器、視訊會議和生產力應用程式。我很喜歡 Spotify 在網頁版播放器中採用的做法。我會看到一個視窗，其中包含目前歌曲的圖片、播放控制項，而且可以輕鬆將歌曲加入我的最愛。

如要使用這項功能，請要求新的畫中畫文件視窗。傳回的 promise 會使用 Picture-in-Picture 視窗 JavaScript 物件解析。然後使用該值將內容新增至視窗。

async function openDPiP() {
  const player = document.querySelector("#player");
  const pipWindow = await documentPictureInPicture
.requestWindow();
  pipWindow.document.body.append(player);
}

pipButton.addEventListener('click', openDPiP);

透過新的 preferInitialWindowPlacement 屬性，您可以指示 Chrome 一律以預設位置和大小開啟子母畫面視窗，而非重複使用前一個視窗的位置或大小。

// Open a Picture-in-Picture window in its default position / size.
const pipWindow = await documentPictureInPicture.requestWindow({
  preferInitialWindowPlacement: true,
});

請參閱 François 的文章Picture-in-Picture for any Element，瞭解更多詳細資訊！

CSS 巢狀宣告

CSS 巢狀結構可讓您在其他規則中巢狀規則，藉此縮短選擇器長度、方便閱讀，並增加模組化程度。CSS Nesting 是最新推出基準，並在近一年內推出。

有幾個極端情況無法正常運作。舉例來說，在下列 CSS 區塊中，預期背景顏色為綠色，因為該區塊是紅色，但現在是紅色！

.foo {
    width: fit-content;

    @media screen {
        background-color: red;
    }

    background-color: green;
}

為修正這類極端情況，CSS 工作群組導入了在 Chrome 130 中實作的巢狀宣告規則。同樣的 CSS 區塊現在會產生綠色背景，符合預期。如果您將裸露的宣告與巢狀規則交錯，請仔細檢查程式碼。

如需更深入的說明，請參閱 Bramus 的文章「CSS 巢狀結構改善了 CSSNestedDeclarations」。

box-decoration-break

box-decoration-break CSS 屬性可讓您指定在多行、資料欄或頁面分割時，元素片段的算繪方式。

不換行

舉例來說，如果所有內容都在同一行，這個元素看起來就會很棒。

使用切片的換行符號

當內容分割成多行時，背景、邊框陰影和邊框等裝飾會被切割，產生相當激烈的外觀。

複製內容的換行符號

加入 box-decoration-break: clone 後，系統會個別轉譯每個片段，打造更美觀的效果。

雖然這並非完全符合 Baseline 標準，但在 Chrome 和 Firefox 中可使用，在 Safari 中則會加上供應商前置字串。

.bdb-clone {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

詳情請參閱 MDN 的 box-decoration-break 說明文件和 Rachel 的文章「Chrome 130 中的 box-decoration-break 屬性」。

還有更多獎品等著您！

當然，還有許多其他功能

  • 經過幾次失敗的嘗試後，可聚焦於鍵盤的捲動容器終於推出。
  • WebGPU 會取得雙重來源混合功能。
  • 而網路序列會取得已連結的屬性。

延伸閱讀

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

訂閱

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

我是 Pete LePage，一旦 Chrome 131 推出，我們就能立即 與您分享 Chrome 的新功能！