以下是一些注意事項：
- 使用新的
:picture-in-picture擬類別，為畫中畫元素新增自訂樣式。 - 在資訊清單中使用 launch_handler 設定網頁應用程式的啟動行為。
- 在 iframe 中使用
credentialless屬性，嵌入未設定跨來源嵌入程式政策的第三方內容 - 還有許多其他功能。
我是 Adriana Jara。讓我們一起來看看 Chrome 110 為開發人員帶來哪些新功能。
:picture-in-picture 虛擬類別
透過 Picture-in-Picture API，網站可以建立浮動式影片視窗，並一律置於頂端，讓使用者在與其他內容互動時，繼續觀看媒體內容。
您現在可以使用 :picture-in-picture CSS 擬物類別，為元素新增樣式，改善使用體驗。
以下程式碼片段示範如何使用子母畫面類別，在影片容器中新增訊息，提醒使用者影片目前正在其他位置播放。
#video-container:has(video:picture-in-picture)::before {
bottom: 36px;
color: #ddd;
content: 'Video is now playing in a Picture-in-Picture window';
position: absolute;
right: 36px;
}
再次在影片元素上使用擬造類別，讓元素變成透明，以便正確顯示訊息。
試試範例，改善畫中畫影片體驗。
launch_handler 資訊清單成員。
Launch Handler API 可讓您控制網頁應用程式的啟動方式，例如使用現有視窗或新視窗，以及所選視窗是否會導向啟動網址。
舉例來說，在電腦環境中，如果您安裝應用程式，然後在瀏覽器中造訪該應用程式，系統會顯示一個按鈕，可讓您前往獨立應用程式視窗。先前唯一可行的行為是在新視窗中啟動應用程式。
如今，使用 launch_handler 資訊清單成員的網頁應用程式可以自訂啟動行為。
舉例來說，下列程式碼片段會讓所有網頁應用程式啟動時，將焦點放在現有應用程式視窗，並前往該視窗 (如果存在的話)，而不是一律啟動新視窗。
{
"launch_handler": {
"client_mode": "navigate-new"
}
}
credentialless iframe。
跨來源隔離的最大挑戰之一，就是所有跨來源 iframe 都必須部署 COEP 和 CORP。瀏覽器不會載入沒有這些標頭的 iframe。
credentialless 屬性可用於嵌入未設定這些標頭的第三方 iframe。
使用 credentialless 時，iframe 會從不同的空白內容載入。特別是，無需 Cookie 即可載入。iframe 會以空白 Cookie Jar 開始。
同樣地，LocalStorage、CacheStorage 等儲存空間 API 也會在新的暫時性區段中載入及儲存資料。頂層文件卸載後，系統會清除所有這類儲存空間。這樣一來，即可移除 COEP 限制。
如要進一步瞭解如何安全地使用 credentialless，將第三方內容載入 iframe，請參閱這篇文章。
還有其他眾多資源！
當然，還有更多功能。
系統已移除不安全內容中的 WebSQL。
CSS initial-letter 屬性提供一種方法，可設定初始字母應在後續文字行中顯示的列數。
FileSystemHandle 現在包含 remove() 方法。
延伸閱讀
這份報告僅涵蓋部分重點。請參閱下方連結，瞭解 Chrome 110 中的其他變更。
- Chrome 開發人員工具 (110) 的新功能
- Chrome 110 淘汰和移除項目
- Chrome 110 的 ChromeStatus.com 更新
- Chromium 來源存放區變更清單
- Chrome 發布時程表
訂閱
如要隨時掌握最新消息，請訂閱 Chrome 開發人員 YouTube 頻道，這樣一來，我們發布新影片時，你就會收到電子郵件通知。
我是 Adriana Jara，Chrome 111 一發布，我就會在這裡告訴你 Chrome 有哪些新功能！