Proč právě teď řešit tvorbu widgetů pomocí Picture-in-Picture API?
Pokud jste někdy potřebovali mít na obrazovce neustále viditelný konkrétní prvek – třeba kurzovní lístek, rozpracovaný text nebo seznam úkolů – oceníte novou možnost, kterou přináší Document Picture-in-Picture API. Toto rozhraní, které nedávno dorazilo do nejnovějších verzích Firefoxu, umožňuje vytvořit plovoucí okno, které zůstane viditelné i při přepínání karet nebo oken. Na rozdíl od klasického Picture-in-Picture, které umí zobrazit jen video, zde máte plnou kontrolu nad HTML, CSS i JavaScriptem. Můžete tak vytvářet opravdové widgety, které budou k dispozici vždy, když je potřebujete.
Co to vlastně Document Picture-in-Picture API umí?
Toto API není totéž co běžné Picture-in-Picture, se kterým se setkáváte při sledování videí. Zatímco klasické řešení umožňuje pouze přesunout video do plovoucího okna, Document Picture-in-Picture (zkráceně DPIP) vám dává možnost vložit do takového okna libovolný webový obsah. Můžete si tak vytvořit:
- Plovoucí kurzovní lístek s akciemi nebo kryptoměnami
- Okno s živou chatovou konverzací
- Seznam úkolů nebo poznámek
- Jednoduchou tabulku s daty
- Mini přehrávač playlistu
Princip je jednoduchý – vytvoříte DPIP okno a do něj vložíte HTML, CSS a JavaScript. Tento widget pak zůstane na obrazovce, i když přepnete na jinou aplikaci nebo tabulku prohlížeče.
Jak začít: kontrola podpory a omezení
Než se pustíte do programování, je důležité zkontrolovat, zda prohlížeč toto API podporuje. V současné době je DPIP k dispozici v prohlížečích Chrome a nejnovějším nejnovějších verzích Firefoxu. Safari zatím podporu nenabízí. Při testování na platformách jako CodePen musíte používat debug mód, protože DPIP nefunguje ve vnořených kontextech (například v iframech).
Základní kontrola podpory v JavaScriptu vypadá takto:
if ('documentPictureInPicture' in window) {
// API je podporované
} else {
// API není k dispozici
}
Je zajímavé, že zatím neexistuje způsob, jak zjistit podporu DPIP pomocí CSS feature queries (@supports), protože funkce at-rule() je podporována jen v Chromu.
Praktický příklad: klonování kurzovního lístku
Pojďme se podívat na konkrétní scénář – budeme chtít zkopírovat existující kurzovní lístek z hlavní stránky do DPIP okna. To zní jednoduše, ale skrývá v sobě několik výzev. Když totiž vezmete HTML komponentu z jejího přirozeného kontextu, může dojít k rozbití CSS stylů, které na ni působily v původním umístění.
Postup by vypadal zhruba takto:
- Otevřete DPIP okno pomocí
await window.documentPictureInPicture.requestWindow() - Naklonujte element s kurzovním lístkem z hlavního dokumentu pomocí
cloneNode(true) - Vložte klon do nového okna
- Zkopírujte potřebné CSS styly (buď inline, nebo odkazy na externí CSS soubory)
Důležité je myslet na to, že DPIP okno je samostatný dokument. To znamená, že pokud používáte CSS proměnné nebo specifické selektory, musíte je do nového okna explicitně přenést.
CSS a media queries pro DPIP okno
Při práci s DPIP oknem můžete využít speciální media query (display-mode: picture-in-picture). To vám umožní psát CSS, které se aplikuje jen na obsah v plovoucím okně. Můžete tak například:
- Změnit velikost písma pro menší okno
- Upravit rozložení prvků
- Skrýt některé nepotřebné elementy
- Přidat specifické pozadí nebo okraje
Příklad použití:
@media (display-mode: picture-in-picture) {
.ticker {
font-size: 14px;
padding: 5px;
}
.ticker-header {
display: none; /* Skryjeme hlavičku v DPIP okně */
}
}
Tento přístup je elegantní, protože nemusíte psát speciální kód pro detekci DPIP okna v JavaScriptu – vše řeší CSS přímo.
Důsledky a tipy pro praxi
Práce s DPIP API přináší několik důležitých aspektů, které byste měli mít na paměti:
- Kontext je klíčový: Když klonujete HTML element, ztrácí své původní CSS styly, pokud nejsou zkopírovány společně s ním. Vždy zkontrolujte, zda všechny potřebné styly (zejména ty z externích souborů) jsou v DPIP okně k dispozici.
- Výkon: Každé otevřené DPIP okno spotřebovává systémové prostředky. Nepoužívejte ho pro příliš mnoho widgetů najednou.
- Uživatelská zkušenost: Ujistěte se, že widget není rušivý a uživatel ho může snadno zavřít nebo minimalizovat.
- Responsivita: DPIP okno může měnit velikost, proto testujte, jak se váš widget chová při různých rozměrech.
- Bezpečnost: Stejně jako u iframů, DPIP okno běží v izolovaném kontextu, což může ovlivnit přístup k některým funkcím.
Závěr a doporučení
Document Picture-in-Picture API otevírá nové možnosti pro tvorbu webových widgetů, které zůstávají viditelné na obrazovce i při práci s jinými aplikacemi. I když je podpora zatím omezena na Chrome a Firefox s nejnovějšími verzemi, stojí za to s tímto API experimentovat. Díky možnosti vkládat vlastní HTML, CSS a JavaScript můžete vytvářet skutečně užitečné nástroje, které zlepší produktivitu práce.
Pokud se rozhodnete DPIP využít na svém webu, doporučuji začít s jednoduchým widgetem (např. poznámkový blok nebo seznam úkolů) a postupně přidávat složitější funkce. Nezapomeňte také ošetřit situaci, kdy prohlížeč API nepodporuje – například nabídnout alternativní řešení nebo informovat uživatele, že tato funkce není k dispozici.
Zdroje
Creating Web Widgets Using the Document Picture-in-Picture API (CSS-Tricks)
Varování: Tento článek byl vytvořen umělou inteligencí a nemusí být zcela přesný. Před použitím uvedených informací v praxi vždy ověřte aktuální stav API a podporu v prohlížečích. Autor ani provozovatel webu nenesou odpovědnost za případné škody vzniklé použitím zde uvedených postupů.
Potřebujete s WordPress webem pomoct? Kontakt najdete přes formulář na stránce formulář na stránce Kontakt.