Javascriptaření: shim, fallback, polyfill

Podpora některých novinek z rodiny HTML5 není taková, jakou bychom potřebovali. Co v takovém okamžiku dělat? Sáhnout po náhražkovém řešení, které chybějící funkčnost nějak dodá… Stačí jen najít to vhodné. V dnešním Javascriptaření si ukážeme knihovny, které právě tento problém řeší.

Polyfill a spol.

Známe to všichni: chceme použít nejnovější webovou technologii, ale bohužel – starší prohlížeče ji nepodporují. Nebo, a to je horší, ji podporují, ale „po svém“. V takovém případě buď novou technologii oželíme (můžeme si ještě pomoci tím, že vynadáme autorovi článku o HTML5, že to je buzzword a „nikde to pořádně nefunguje“), nebo najdeme přijatelnou náhradu.

Náhradní technologie buď může simulovat výsledek (místo kreslení do canvasu tam dáme rovnou nakreslený obrázek), nebo samotný proces. Pokud nám nevadí, že vše poběží pomaleji nebo že nebudou k dispozici všechny funkce, můžeme zvážit použití nějaké polyfill knihovny.

Knihovny, které nějak doplňují chybějící funkčnost, se označují jako shim („podložka, vložka“ atd.). Shim, který má funkce nějakého budoucího API, jsou označovány jako polyfill (viz definice polyfill). Taková polyfill knihovna má funkce shodné např s Canvas API. V prohlížečích, které Canvas podporují, se nepoužije a ponechá práci na zabudované implementaci. Pokud prohlížeč Canvas nepodporuje, zavede vlastní funkce se stejnými parametry („implementuje rozhraní“) a pomocí nějakého fallback řešení (např. Flashe) simuluje nové API a umožňuje tak pracovat skriptům s Canvasem stejně jako kdyby Canvas v prohlížeči byl.

Polyfill ano, nebo ne?

Většina polyfill knihoven kontroluje, zda existuje nativní implementace toho, s čím přicházejí ony, a pokud ano, nedefinují žádné funkce. Přesto je to zbytečně načítaný kód. Pro rozhodování, zda určitou knihovnu načíst nebo ne (a pro její načtení), slouží malá knihovna yepnope.js. Pomocí sady testů můžete předepsat, jakou technologii potřebujete použít, co se má načíst v případě, že jí prohlížeč disponuje, a co se má načíst v případě, že jí nedisponuje.

Canvas

Pravděpodobně nejznámější novinka, podporovaná naprostou většinou nových prohlížečů. Přesto až donedávna nepoužitelná např. v IE. Řešení nabízí např. excanvas, který řeší zobrazování pomocí vml, které IE podporuje. Mnohem rychlejší řešení nabízí FlashCanvas, který simuluje canvas pomocí objektu ve Flashi. Na obdobném principu funguje slcanvas project, který, jak už název napovídá, využívá SilverLight. Další vhodné knihovny:

Geolokace

Pokud prohlížeč nepodporuje geolokační API, můžete použít některé z následujících knihoven:

  • geolocation shim zjišťuje polohu z Google ClientLocation API
  • geo-location-javascript je zaměřená především na mobilní telefony a k získání polohy používá proprietární funkce iOS, BlackBerry či WebOS. 
  • better-geolocation-api kombinuje standardní W3C geolokaci, pokud není, použije funkce Google Gears či Blackberry GPS.

SVG

Vektorovou grafiku řeší opět několik knihoven s různým přístupem. Pravděpodobně nejkomplexnější postup zvolili autoři dojo gfx, kteří neexistující podporu SVG delegují na canvas, Flash, Silverlight či VML podle toho, co je dostupné. SIE SVG library simuluje SVG pomocí VML, canvg pomocí canvasu a svgweb Flashem.

Za zmínku stojí i knihovna Raphaël (viz článek na Zdrojáku), která sice není polyfill v pravém slova smyslu, vytváří si vlastní API, ale dokáže využít dle okolností VML nebo SVG.

Web Storage (LocalStorage a SessionStorage)

Ukládání dat na straně klienta usnadňuje právě tato technologie. Na rozdíl od starých Cookies se informace nepřenášejí při každém dotazu na server, jednodušeji se s nimi pracuje (key-value databáze) a umožňují uložit podstatně větší množství dat.

Opět používají různé knihovny různá „náhradní řešení“, ať už Google Gears (např. realStorage) nebo cookies (storage polyfill) pro LocalStorage, či Window Name (sessionstoragessw) pro SessionStorage.

Nové elementy

S novými „sémantickými“ elementy bývá v některých prohlížečích problém při jejich stylování – zatímco některé prohlížeče sice vytvoří patřičný element, i když jej neznají, a dokáží s ním pracovat pomocí stylů, v jiných (buďme konkrétní: např. v IE) nelze „nerozpoznaný element“ nastylovat ani s ním jinak pracovat. Problém řeší html5shim, který pomocí jednoduchého triku donutí IE nadefinovaný stylopis použít. Problém nemožnosti práce s innerHTML pak obchází innerShiv.

Video a audio

Samotné elementy video a audio mají „zabudovanou“ podporu pro prohlížeče, které je neznají – tedy fallback obsah. Vývojář tak může nasadit záložní řešení (nejčastěji flashový přehrávač). Seznam náhradních řešení je velmi obsáhlý:

Video s časovou osou (pro titulky)

Audio

  • jPlayer Flashová náhrada, používá jQuery
  • audio.js Flashový audiopřehrávač

Web Forms

Velmi oblíbená novinka (a přitom s poměrně špatnou podporou) jsou nové formulářové typy a atributy. Některé z nich (typicky kalendář nebo výběr barvy) se dosud řešily pomocí JS knihoven; tyto knihovny můžete tedy dál používat s drobnou úpravou – nejprve otestujete podporu pro daný typ, a pokud jí prohlížeč nedisponuje, nasadíte JS.

Knihoven, které nějak nahrazují chybějící podporu pro nové formulářové prvky, existuje opět celá řada. Některé z nich se zaměřují pouze na jeden aspekt (h5Validate či Placeholder knihovny jquery html5 placeholder, Placeholder jQuery plugin, jQuery-Placeholder, placeholder.js), další nabízejí víc funkcí najednou, resp. se pokouší rovnou implementovat většinu funkcí.

A dál?

Polyfill knihovny existují i pro mnohé další technologie. Např. CSS pro Ruby annotations, pro drag-n-drop se soubory, pro MathML, pro Audio API, cross-document messaging, CORS, pro ECMAScript 5 i pro nejrůznější novinky z CSS3.

Všechno dohromady (dobrá, ne všechno, ale velkou část) nabízí Webshims Lib. V jedné knihovně tak najdete HTML5shim, innershiv, polyfills pro canvas, forms, ECMAScript5, localStorage/ses­sionStorage, JSON a geolokaci.

Podpora technologií z rodiny HTML5 sílí, ovšem leckde jejich většímu rozšíření brání strach z toho, že uživatelé nebudou mít potřebné technologie v prohlížeči k dispozici. Výše uvedené knihovny (polyfills) mohou v takové situaci výrazně pomoci při rozhodování, zda technologii nasadit.

Poděkování: Neocenitelnou službu pro hledání podobných knihoven poskytuje stránka HTML5 Cross Browser Polyfills, kterou vytvořil a spravuje Paul Irish, autor Modernizru. Přispívají Jonathan Cook, Mark Boas, Michael Behan, Mathias Bynens, Eli Grey, Øyvind Sean Kinsey a další. Článek samotný vychází především z informací na této stránce uvedených.

Začal programovat v roce 1984 s programovatelnou kalkulačkou. Pokračoval k BASICu, assembleru Z80, Forthu, Pascalu, Céčku, dalším assemblerům, před časem v PHP a teď by rád neprogramoval a radši se věnoval starým počítačům.

Věděli jste, že nám můžete zasílat zprávičky? (Jen pro přihlášené.)

Komentáře: 4

Přehled komentářů

maryo good
blizz Re: Javascriptaření: shim, fallback, polyfill
kostelnik Re: Javascriptaření: shim, fallback, polyfill
bas web forms
Zdroj: https://www.zdrojak.cz/?p=3481