Firefox 151 Introduces Document Picture-in-Picture API
A new API for creating web widgets
1What is the Document Picture-in-Picture API?
The Document Picture-in-Picture API, introduced with Firefox 151, allows any HTML content to be placed in a floating window, unlike the traditional Picture-in-Picture API which is limited to videos. This API enables users to create widgets that remain on screen even when switching browser tabs or OS windows. It is particularly useful for tools like stock tickers, live chats, or notes that need to stay visible at all times. The API is designed to enhance user experience by providing persistent access to essential content.
2How Does It Work?
The Document Picture-in-Picture API works by creating a DPIP window and allowing HTML, CSS, and JavaScript to be added to it. For example, a stock ticker can be cloned from the main document into a DPIP window. However, developers must be cautious as CSS might break when taken out of context. The API requires the demo page to be opened in debug mode, as it does not work in nested browsing contexts like CodePen iframes. Additionally, Safari does not yet support this API.
3Checking Browser Support
Browser support for the Document Picture-in-Picture API can be checked using JavaScript. If the API is not supported, the relevant button can be removed, or if supported, a DPIP window can be created. Currently, the API is only available for desktop browsers. For instance, checking if the 'documentPictureInPicture' property exists in the window object determines support status. This check is crucial for improving user experience and ensuring compatibility.
4Creating a DPIP Window
To create a DPIP window, the 'requestWindow' method is used. This method accepts options like width and height. For example, a window with a width of 600 pixels and a height of 400 pixels can be created. The 'preferInitialWindowPlacement' option, when set to true, prevents the browser from saving the window's position and size. Once the DPIP window is created, HTML content can be cloned and appended to it, enabling dynamic content display.
5Cloning Multiple Elements
Cloning multiple elements into a DPIP window requires a different approach. Using 'querySelectorAll', a NodeList array can be created, and 'createDocumentFragment' can be used to generate an off-screen document fragment. By looping through the array, each node can be cloned into the fragment. Finally, the entire fragment is appended to the DPIP window's 'head', resulting in a single reflow instead of multiple ones, which enhances performance.
6CSS and Media Queries
CSS for components cloned into a DPIP window may break out of context. Therefore, specific CSS for the DPIP window might be necessary. For instance, the '@media (display-mode: picture-in-picture)' media query can be used to define styles unique to the DPIP window. However, browser support for this query is limited, currently only available in Chrome. This limitation requires developers to consider cross-browser compatibility carefully.
7Use Cases
The Document Picture-in-Picture API offers various use cases, such as creating floating notes, live data trackers, or multitasking tools. It can significantly enhance user productivity in fields like financial data tracking, project management, or educational tools. However, developers must remember that some browsers, like Safari, do not yet support this API. Alternative solutions should be considered to ensure a seamless user experience across all platforms.
8Future Potential
The Document Picture-in-Picture API has the potential to enrich user experience by offering new possibilities for web developers. However, broader browser support and API maturity are needed. Improvements in areas like media queries and CSS compatibility could encourage wider adoption. This API is expected to become more prevalent in web applications as it evolves and gains broader support.
Original article: CSS-Tricks — Firefox 151 ile Gelen Document Picture-in-Picture API