🔒Открыть пост
и посмотреть медиа
и посмотреть медиа
Плавающий виджет поверх всех окон одним вызовом API
Firefox 151 включил Document Picture-in-Picture API, до этого он был только в Chrome. В отличие от PiP для видео, documentPictureInPicture.requestWindow() открывает окно поверх вкладок и других приложений с любым HTML внутри: тикер, чат, таймер, заметки. Раньше это требовало расширения или Electron.
CSS-Tricks разобрал API на примере тикера акций. Стили в новое окно не наследуются: и
• клонируют через querySelectorAll() в createDocumentFragment() и одним append кладут в . Ширину и высоту задают только парой, иначе размер выбирает браузер. Фокус уходит в PiP-окно, поэтому кнопка-переключатель закрывает его со второго клика.
@supports не поможет: at-rule() есть только в Chrome, остаётся "documentPictureInPicture" in window и скрытие кнопки. Стили под окно пишут через @media (display-mode: picture-in-picture). Только десктоп, Safari мимо, в iframe не запускается.
#браузеры #css #javascript