Co je to polyfill?

Typicky se jedná o JavaScriptový kód, který pro nepodporovaný prohlížeč automaticky doplní určitou funkčnost, aniž by programátor musel něco dělat.

Technicky vzato polyfill použije nějaké horší, ale v daném prohlížeči nejlepší možné, řešení k dosažení výsledku.

Výhody a nevýhody

Hlavní výhodou je použití nejlepšího možného standardisovaného řešení v nových prohlížečích bez ztráty času vytvářením dalších řešení pro nepodporované prohlížeče.

Největším risikem použití JS polyfillu je fakt, že daná funkce může být kvůli tomu v horších prohlížečích závislá na JavaScriptu, ač by šla konservativnějším řešením vytvořit jen v HTML/CSS.

Zde může nastat paradoxní situace, kdy pro vyšší výkon novějších rychlejších prohlížečů (zpravidla běžících na rychlejším HW) je zvoleno náročnější řešení pro staré pomalé prohlížeče na starém hardwaru.

Extrémní jsou potom situace, kdy se polyfill používá pro věci, co se teprve budou implementovat do prohlížečů.

Modelový příklad polyfillu

V prohlížečích IE 6–8 nejde udělat kulaté rohy pomocí CSS vlastnosti border-radius.

Na výběr je následující:

  1. Počítat s tím, že vytvořit čistě v CSS kulaté rohy pro tyto prohlížeče nejde, a proto se v grafickém návrhu oblým rohům vyhnout.

  2. Řídit se tím, že stránka nemusí vypadat ve všech prohlížečích stejně, a kulaté rohy ve starších prohlížečích oželet a v nových použít border-radius.

  3. Zvolit konservativní řešení pomocí obrázků, které bude bezproblémově fungovat i ve starých prohlížečích, jen ty nové nedostanou nejlepší možné řešení, jaké by mohly. Což není takový problém, protože jsou rychlé a běží typicky na lepším HW.

  4. Vyvinout dvě řešení – jedno pro nové prohlížeče přes border-radius a druhé pomocí obrázků pro ty staré.

  5. Použít polyfill border-radius.htc, který u elementu s kulatými rohy zjistí hodnotu jeho border-radiusu (pomocí getComputedStyle) a kulatý roh nakreslí pomocí VML (Vector Markup Language – předchůdce SVG od Microsoftu).

S ohledem na různé vlivy se potom vyplatí použít některý z přístupů. Volba se typicky liší projekt od projektu.

Příklady

Odkazy jinam

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Onclick z klávesnice

Událost onclick na různých elementech

Test události onclick na různých elementech při vyvolání myší i klávesnicí.

Vypnuté cookies

Zjištění vypnutých cookies

Jak zjistit, jestli má návštěvník zapnuté nebo vypnuté cookies.

Varování v JS konsoli

Upozornění v JS konsoli

Jak do JS konsole vložit výrazné varování o risicích vkládání cizího kódu.

Vývojářské nástroje v prohlížečích

Nástroje pro vývojáře v prohlížečích

Pro testování a ladění webu existují (nebo je lze snadno doplnit) ve všech rozšířených prohlížečích vývojářské nástroje.

Komentáře