CSS media feature > display-mode: picture-in-picture

Paul Li
3 min readMar 22, 2024
Chrome for Developers. https://developer.chrome.com/blog/the-future-of-picture-in-picture

Introduction

Web Picture-in-Picture 功能問世以來,讓 video 類型的服務多了點溫度,讓觀看影片、進行會議都可以和頁面瀏覽同步進行,達到多工資訊不漏接的最佳狀態。

Document Picture in Picture API 更讓這樣的瀏覽體驗昇華至全新的境地,Picture in Picture(以下簡稱 pip)已不再是 <video /> 的專利了,透過這個 API 的導入,任何 HTML element 都有機會開啟 pip 全新的篇章~

隨著 Chrome VER.123 的推出,CSS media feature > display-mode: picture-in-picture 也正式支援了,和其他 media feature 家族一樣,web developers 透過該條件的設置,完美的 style picture-in-picture 中的元件。

接下來就來介紹一下三種 style pitcture-in-picture 中 element 的方法~

Direct style

一般來說 Document Picture in Picture API active 的時候會把 element 直接黏貼到另一個 document 中,也就是說我們可以透過 element 的 parent 是 body 的特性來對 element 進行裝飾。

Pseudo Class > :picure-in-picture

透過 pseudo class > :picture-in-picture 亦可對 element 本身或是 children 進行裝飾。如下所示,透過 pseudo class 來設置條件並進而撰寫滿足條件後的樣式。

display-mode: picture-in-picture

這也是 Chrome VER.123 率先支援的 media feature > display-mode: picture-in-picture,讓瀏覽器偵測當前環境是否滿足條件,倘若滿足條件,則可以輕鬆滿足客製化樣式的需求。

Conclusion

以上便是目前支援的三種 style pitcture-in-picture 中 element 的方法,大夥兒們可視當前開發環境以及習慣來選擇最適宜的方法。

感謝大家的閱讀,希望本篇能確切的幫助到大家~ #picture-in-picture

Reference

--

--

Paul Li

Paul is the lead programmer of the AMP project at Yahoo Taiwan and is always eager for modern web technologies. He is also focusing on UX for vivid user flow.