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:

• canvas-text 
• fxCanvas

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 (sessionstorage,  ssw) 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ý:

• mediaelement.js je přehrávač v swf, který napodobuje API od elementu Video. Podporuje <track>
• html5media
• video.js Podporuje <track>
• playr Podporuje <track>
• video for everybody založený na HTML, funguje i bez JavaScriptu

Video s časovou osou (pro titulky)

• videosub
• JSCaptions
• Captionator (podporuje specifikaci TextTrack WHATWG a MediaTracks)

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í.

• webforms2
• html5 forms
• html5widgets je postavený na webforms2 a nabízí i knihovny pro výběr data a barvy.
• H5F
• Slider / Range polyfill
• Range shim pro Firefox 4
• jquery.html5form
• jquery.HTML5Sup­port podporuje placeholder a autofocus
• gallery-html5-forms YUI3 gallery module Podpora pro nové formulářové prvky, založená na widgetech z YUI3
• jquery.f5 nabízí několik typů vstupních polí, některé atributy a validaci. Vyžaduje jQuery.

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.