Chrome 110 新功能

Adriana Jara

以下是一些注意事項：

  • 使用新的 :picture-in-picture 虛擬類別為子母畫面元素新增自訂樣式。
  • 在資訊清單中使用 launch_handler 設定網頁應用程式啟動行為。
  • 在 iframe 中使用 credentialless 屬性，嵌入未設定跨來源嵌入工具政策的第三方內容
  • 還有不少更多應用程式。

我是 Adriana Jara我們來深入說明 Chrome 110 為開發人員推出的新功能。

:子母畫面虛擬類別

透過 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 等 Storage API 也會在新的臨時分區中載入及儲存資料。一旦卸載頂層文件，系統就會清除這個所有儲存空間。這可用來移除 COEP 限制。

詳情請參閱這篇文章，瞭解如何安全地使用 credentialless 將第三方內容載入 iframe 中。

還有更多獎品等著您！

當然還有許多其他東西。

Web SQL 現已從不安全的環境中移除。

CSS initial-letter 屬性可讓您設定首字母應將初始字母佔用下列幾行文字的行數。

FileSystemHandle 現在包含 remove() 方法。

其他資訊

以上內容僅涵蓋部分重點功能。如要瞭解 Chrome 110 的其他變更，請點選下方連結。

訂閱

如要隨時掌握最新資訊，請訂閱 Chrome Developers YouTube 頻道，每當我們推出新影片時，您就會收到電子郵件通知。

我是 Adriana Jara。Chrome 111 推出後，我很樂意告訴你 Chrome 的新功能！