Firefox 151 ships Document Picture-in-Picture API for floating HTML widgets beyond video

Firefox 151 shipped the Document Picture-in-Picture API, which differs from the existing Picture-in-Picture API that only handles video. The DPIP API lets developers put any HTML, CSS, and JavaScript into a floating window that stays visible when the user switches tabs or OS windows. The article frames these windows as web widgets suitable for stock tickers, live chat, playlists, to-do lists, notes, and spreadsheets. Chrome already supports the API, but Safari does not, so cross-browser coverage is incomplete.

Feature detection is a practical obstacle. There is no way to use @supports to query whether @media (display-mode: picture-in-picture) is supported, because the at-rule() function is only supported by Chrome and plans to support preludes appear to have been dropped. Safari Technology Preview 251 release notes mention at-rule detection in @supports, but it is unclear when that will ship. Developers must instead check for the presence of documentPictureInPicture on the window object using JavaScript and degrade gracefully when it is absent.

Creating a DPIP window involves calling requestWindow() on window.documentPictureInPicture, which returns a promise. Width and height options can be set but not independently, specifying one requires the other, and if neither is set the browser chooses. The preferInitialWindowPlacement option, when true, prevents the browser from saving the window's position and size. The disallowReturnToOpener option hides the "Back to tab" button. DPIP windows replace existing DPIP windows automatically, so there is no need to manage multiple instances.

Adoption costs are not trivial. The API is desktop-only, so the same feature-detection check also serves to exclude mobile browsers. It does not work in nested browsing contexts such as iframes, which affects demo environments like CodePen. More significantly, cloning a component from the main document into a DPIP window removes it from its original CSS context, which can break styling. The article demonstrates this with a stock ticker and notes that targeted media queries and pseudo-classes are needed to write CSS specifically for the DPIP window.

Only one feed carries this event, and it is a tutorial on CSS-Tricks rather than a news report, so there is no corroboration from other sources. The material does not specify which Chrome version first shipped the API, nor does it provide benchmark or adoption data. What it does establish is that Firefox 151 added support, Safari lacks it, and the practical workflow involves JavaScript feature detection, promise-based window creation, and careful CSS context management.