Chrome 130 的新功能

Pete LePage

以下是一些注意事項：

我是 Pete LePage，讓我們深入瞭解 Chrome 130 為開發人員帶來哪些新功能。

記錄子母畫面

如果您想將影片從瀏覽器分頁彈出，以便在與其他網站或應用程式互動時繼續觀看影片，子母畫面 API 是絕佳選擇。但只能錄製影片。

Spotify 的子母畫面視窗

文件子母畫面 API 則消除了這項限制，讓您建立子母畫面視窗，並控管其中的內容。非常適合自訂影片播放器、視訊會議和效率提升應用程式等用途。我很喜歡 Spotify 在網頁播放器中採用的做法。 我會看到一個視窗，顯示目前歌曲的專輯封面和播放器控制項，並可輕鬆將歌曲加入我的最愛。

如要使用這項功能，請要求開啟新的文件子母畫面視窗。傳回的 promise 會使用子母畫面視窗 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 的文章「適用於任何元素的子母畫面」！

CSS 巢狀宣告

CSS 巢狀結構可將規則巢狀內嵌在其他規則中，縮短選取器、方便閱讀，並提高模組化程度。CSS 巢狀結構是新推出的 Baseline，已推出近一年。

有幾個極端情況無法正常運作。舉例來說，使用下列 CSS 區塊時，您會預期背景顏色為綠色 (因為這是最後一個)，但實際上卻是紅色！

.foo {
    width: fit-content;

    @media screen {
        background-color: red;
    }

    background-color: green;
}

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

如需更深入的說明，請參閱 Bramus 的文章「CSS nesting improves with CSSNestedDeclarations」(CSS 巢狀結構功能改善)。

box-decoration-break

box-decoration-break CSS 屬性可讓您指定元素片段在跨越多行、欄或頁面時的轉譯方式。

沒有換行符號

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

使用 Slice 換行

如果內容分成多行，背景、方塊陰影和邊框等裝飾會遭到切割，形成相當突兀的外觀。

換行符號 (使用複製功能)

加入 box-decoration-break: clone 後，每個片段都會獨立算繪，呈現更美觀的畫面。

雖然還不到 Baseline 的程度，但 Chrome 和 Firefox 已經支援，Safari 則有供應商前置字元。

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

詳情請參閱 box-decoration-breakMDN 上的文件，以及 Rachel 的文章「Chrome 130 中的 box-decoration-break 屬性」。

還有其他眾多資源！

當然還有許多其他功能。

延伸閱讀

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

訂閱

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

我是 Pete LePage，Chrome 131 版一推出，我們就會在這裡告訴你 Chrome 的新功能！