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 巢狀結構是新推出的基準功能，已推出將近一年。

有幾個極端情況無法正常運作。舉例來說，在下列 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 的新功能！