以下是一些注意事項：
我是 Pete LePage。讓我們一起來看看 Chrome 130 為開發人員提供哪些新功能。
文件子母畫面
當您想從瀏覽器分頁中彈出影片，以便在與其他網站或應用程式互動時持續觀看影片時，子母畫面 API 就非常實用。但它只適用於影片。
使用文件子母畫面 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 130 的版本資訊。
- Chrome 開發人員工具 (130) 的新功能
- Chrome 130 的 ChromeStatus.com 更新
- Chromium 原始碼存放區變更清單
- Chrome 發布時程表
訂閱
如要隨時掌握最新消息，請訂閱 Chrome 開發人員 YouTube 頻道，這樣一來，我們發布新影片時，你就會收到電子郵件通知。
我是 Pete LePage，一旦 Chrome 131 推出，我們就能立即 與您分享 Chrome 的新功能！