以下是一些注意事項：
- 使用新的
: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 罐開始。
同樣地，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 有哪些新功能！