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