Obsah
- 01. html5shiv
- Používání
- Poznámky
- Doporučení
- 02. - bez předpony
- Používání
- Poznámky
- Doporučení:
- 03. Selectivizr
- Používání
- Poznámky
- Doporučení
- 04. Flexie
- Používání
- Poznámky
- Doporučení
- 05. CSS3 PIE
- Používání
- Poznámky
- Doporučení
- 06. JSON 2
- Používání
- Poznámky
- Doporučení
- 07. es5-podložka
- Používání
- Poznámky
- Doporučení
- 08. FlashCanvas
- Používání
- Poznámky
- Doporučení
- 09. MediaElement.js
- Používání
- Poznámky
- Doporučení
- 10. Webshims Lib
- Používání
- Poznámky
- Doporučení
Podložky, které napodobují standardní funkce HTML5 a rozhraní API, běžně označované jako polyfills, jsou stále častější, protože vývojáři usilují o posunutí webu vpřed. Komunita Modernizr udržuje vyčerpávající seznam známých polyfillů, které obsahují stovky projektů s různou úplností a kvalitou. Zde je 10 doporučených polyfillů, které dnes patří mezi nejlepší a nejpoužívanější.
01. html5shiv
URL projektu: https://github.com/aFarkas/html5shiv
Ve verzích IE starších než 9 se neznámé prvky HTML líbí sekce> a nav> by byly analyzovány jako prázdné prvky, které by narušily vnořovací strukturu stránky a učinily tyto prvky unstyleable. Jeden z nejpoužívanějších polyfillů, html5shiv využívá další trik IE k obcházení této chyby: volání document.createElement ("tagname") pro každý z nových prvků HTML5, což je magicky dělá IE správně analyzovat. Zahrnuje také základní výchozí styl pro tyto prvky HTML5.
Používání
Stáhněte si soubor html5shiv.js (nebo html5shiv-printshiv.js, pokud potřebujete podporu tisku) z projektu dist adresář a vložte jej někam do souborů svého webu. Chcete-li optimalizovat výkon, odkazujte na soubor skriptu z hlavičky> dokumentu po všech seznamech stylů. Nezapomeňte je zabalit do podmíněných komentářů, aby se stáhli pouze staršími verzemi IE, které to potřebují.
! - [pokud lt IE 9]>
script src = "cesta / k / html5shiv.js"> / skript>
! [endif] ->
Poznámky
Pokud používáte Modernizr, je pravděpodobné, že html5shiv je již pro vás zahrnut, takže není nutné, abyste jej zahrnovali znovu.
Doporučení
Určitě to použijte, pokud používáte prvky HTML5 a váš web získává návštěvy ze starého prohlížeče IE. Je to samozřejmost.
02. - bez předpony
URL projektu: http://leaverou.github.com/prefixfree/
Ačkoli většina polyfill cílí na zastaralé prohlížeče, některé existují, aby jednoduše posunuly moderní prohlížeče o něco víc. Polyfill bez předpony od Lea Verou je takový polyfill, který umožňuje současným prohlížečům rozpoznat nepředpjaté verze několika vlastností CSS3 místo toho, aby vyžadovaly vypsání všech předpon dodavatelů. Přečte šablony stylů vaší stránky a nahradí všechny nepředpjaté vlastnosti jejich předponami, které rozpozná aktuální prohlížeč.
Používání
Stáhněte si prefixfree.min.js z domovské stránky projektu do svého adresáře webu. Zahrňte to na stránku hlava> hned po všech vašich seznamech stylů.
odkaz rel = "stylesheet" href = "/ css / styles.css">
script src = "/ path / to / prefixfree.min.js"> / script>
Poznámky
Největší omezení jsou popsána na domovské stránce projektu. Jako vždy změřte vnímanou dobu načítání své stránky s polyfill na místě, abyste se ujistili, že čas, který stráví načítáním a přepisováním na straně klienta CSS, nezpůsobuje znatelné zpoždění.
Preprocesor CSS, jako je Sass, může být také dobrou alternativou, i když to stále vyžaduje odesílání všech předponových CSS po síti. Zvažte velikost předzpracovaného CSS proti velikosti polyfillu bez předpony plus doby jeho zpracování.
Doporučení:
Použijte, pokud se obáváte velikosti CSS nebo vás štve psaní předpony.
03. Selectivizr
URL projektu: http://selectivizr.com/
Selectivizr od Keitha Clarka je populární polyfill, díky kterému pracuje mnoho selektorů CSS3 v IE 8 a níže. Přečte šablony stylů stránky a hledá řadu známých selektorů CSS3, poté použije knihovnu selektorů JavaScript k dotazování dokumentu na prvky odpovídající těmto selektorům a použije styly přímo na tyto prvky. Podporuje několik knihoven pro výběr JavaScriptu, z nichž jednu pravděpodobně již na své stránce používáte.
Používání
Stáhněte si distribuční balíček a rozbalte jej někde v adresáři svého webu. Odkaz selectivizr-min.js v hlava> vaší stránky, po odkazu na knihovnu selektoru JS podle vašeho výběru (jQuery v níže uvedeném příkladu kódu). Zabalte jej do podmíněného komentáře, aby si jej stáhly pouze staré IE a případně použijte a noscript> zahrnout záložní styl.
script type = "text / javascript" src = "/ path / to / jquery.min.js"> / script>
! - [if (gte IE 6) & (lte IE 8)]>
script type = "text / javascript" src = "/ path / to / selectivizr-min.js"> / script>
noscript> link rel = "stylesheet" href = "/ path / to / fallback-styles.css" /> / noscript>
! [endif] ->
Poznámky
Hlavní upozornění jsou popsána v dolní části stránky selectivizr.com, nejdůležitější je, že dotaz je spuštěn jednou při načtení stránky a automaticky nezpracovává dynamické dodatky k DOM, což brání jeho použití na dynamických webech.
Doporučení
Používejte na jednoduchých statických stránkách, ale držte se jiných tradičních metod (např. Jednoduchých tříd) na velkých nebo vysoce dynamických stránkách.
04. Flexie
URL projektu: http://flexiejs.com/
Možná jedna z nejočekávanějších funkcí CSS3, Flexibilní rozvržení rámečku (aka Flexbox) slibuje, že bude extrémně výkonným nástrojem pro rozvržení prvků rozhraní. Stroje WebKit a Mozilla již roky podporují předběžnou syntaxi konceptu. Flexie implementuje podporu stejné syntaxe v IE a Opera.
Mějte však na paměti, že koncept spec prošel drastickou revizí nové (a mnohem výkonnější!) Syntaxe, kterou Flexie ještě nepodporuje. Flexie můžete stále používat spolu se starou syntaxí, ale nezapomeňte zahrnout novou syntaxi i pro budoucí prohlížeče.
Používání
Stáhněte si Flexie na svůj web a odkazujte na flexie.min.js na své stránce po seznamech stylů, spolu s výběrem voliče JS jako jQuery.
script src = "/ path / to / jquery.min.js"> / script>
script src = "/ path / to / flexie.min.js"> / script>
Použijte styly Flexboxu ve vašem CSS (stará syntaxe následovaná novým) a Flexie je automaticky vyhledá a vykreslí v IE:
.Panel nástrojů {
/ * stará syntaxe: * /
display: -webkit-box;
displej: -moz-box;
displej: box;
-webkit-box-orient: horizontální;
-moz-box-orient: horizontální;
box-orient: horizontální;
/ * nová syntaxe: * /
displej: flex;
směr flexu: řádek;
}
.toolbar> .message {
/ * stará syntaxe: * /
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
/ * nová syntaxe: * /
flex: 1;
}
Poznámky
Kromě problému se syntaxí si přečtěte požadavky a upozornění v projektu Readme pro běžné problémy. Flexie používá základní motor od Selectivizr, takže platí stejná omezení.
Doporučení
Používejte opatrně, pouze pokud opravdu potřebujete rozvržení Flexboxu, a dávejte pozor na rychlost rozvržení.
05. CSS3 PIE
URL projektu: http://css3pie.com
PIE („Progressive Internet Explorer“) implementuje některé z nejpopulárnějších chybějících vlastností dekorace CSS3 boxu v IE, včetně poloměr ohraničení a stín stínu pro IE 8 a nižší a pozadí s lineárním přechodem pro IE 9 a nižší. Vyvolán jako chování HTC (patentovaná funkce IE), vyhledává nepodporované vlastnosti CSS3 na konkrétních prvcích a tyto vlastnosti vykresluje pomocí VML pro IE 6-8 a SVG pro IE 9. Jeho vykreslování je většinou k nerozeznání od nativních implementací prohlížeče a je zvládá dynamickou modifikaci DOM dobře.
Používání
Stáhněte si distribuční balíček a rozbalte jej někde v adresáři svého webu. Ve svém CSS přidejte pro každé pravidlo obsahující vlastnosti CSS3 a chování vlastnost směřující na PIE.htc (všimněte si, že základem relativních cest je adresa URL stránky, nikoli soubor CSS, jaký byste normálně očekávali.)
.krabice {
poloměr ohraničení: 8px 8px 0 0;
stín boxu: # 666 0px 2px 3px;
behavior: url (/path/to/PIE.htc);
}
Poznámky
Většina běžně se vyskytujících problémů je zdokumentována na webu. Chování HTC může být občas trochu složité, takže existuje i samostatná verze PIE.js, kterou lze použít jako manuální alternativu.
Proces vykreslování je intenzivní a PIE upřednostňuje přesnost před rychlostí, takže dávejte pozor, abyste jej nepoužívali na příliš mnoha prvcích, abyste zabránili znatelnému zpoždění při načítání stránky.
Doporučení
Používejte střídmě a pouze v případě, že to opravdu musíte. Styly dekorace obvykle nejsou rozhodující pro funkčnost webu, proto je obvykle vhodnější ladná degradace.
06. JSON 2
URL projektu: https://github.com/douglascrockford/JSON-js
Douglas Crockford původně napsal json2.js jako API pro čtení a zápis svého nadcházejícího datového formátu JSON. Stalo se tak široce používaným, že se tvůrci prohlížečů rozhodli nativně implementovat jeho API a proměnit ho ve „de facto“ standard; json2.js byl po skutečnosti transformován z knihovny na polyfill.
Používání
Stáhněte si json2.js do svého adresáře webu a odkazujte na něj v elementu skriptu. Chcete-li zabránit tomu, aby jej stahovaly prohlížeče, které nativně podporují JSON, můžete jej dynamicky zahrnout na základě kontroly globálního objektu JSON:
skript>
if (! window.JSON) {
document.write ('script src = "path / to / json2.js"> / script>');
}
/ skript>
Poznámky
Podívejte se také na nesouvisející projekt JSON 3, který implementuje stejné API se zlepšenou správností a zabezpečením za cenu rychlosti.
Doporučení
Určitě ji použijte, pokud potřebujete pracovat s daty JSON ve starších prohlížečích.
07. es5-podložka
URL projektu: https://github.com/kriskowal/es5-shim/
ECMAScript 5. vydání („ES5“) přináší několik užitečných nových skriptovacích funkcí, a protože jsou syntakticky kompatibilní se staršími motory JavaScriptu, lze je většinou polyfillovat metodami záplatování na vestavěné objekty JS. Tento polyfill es5-shim to dělá ve dvou částech: es5-shim.js obsahující ty metody, které mohou být plně polyfill, a es5-sham.js obsahující částečné implementace dalších metod, které se příliš spoléhají na základní stroj, aby fungoval přesně.
Používání
Stáhněte si es5-shim.min.js (a / nebo es5-sham.min.js) z úložiště projektu do svého adresáře webu. Zahrňte to na svou stránku před jinými skripty, které používají funkce ES5.
script src = "/ path / to / es5-shim.min.js"> / script>
Poznámky
Pokud potřebujete jen několik metod ES5, zdrojový kód es5-shim.js je dobře zdokumentován, takže ty, které nepotřebujete, můžete snadno odstranit a zmenšit velikost souboru.
Pro velmi odvážné es6-shim dělá to samé pro základní části ECMAScript 6. ES6 má však méně syntakticky kompatibilních funkcí, a jen velmi málo prohlížečů to zatím nativně podporuje, takže jeho výhoda je v tomto okamžiku minimální.
Doporučení
Určitě ji použijte, pokud váš kód JavaScript může těžit z metod ES5, takže moderní prohlížeče mohou používat rychlé nativní implementace.
08. FlashCanvas
URL projektu: http://flashcanvas.net/
FlashCanvas je přesně to, co naznačuje jeho název: implementace API HTML5 Canvas pomocí pluginu Flash. Vzácná komerční polyfill, přichází v placené verzi „pro“ i ve verzi zdarma, která postrádá několik pokročilých funkcí, jako jsou stíny.
Používání
Stáhněte si distribuci, kterou chcete použít, a rozbalte ji někde v adresáři svého webu. Odkaz flashcanvas.js z hlava> vaší stránky, uzavřený v podmíněném komentáři:
! - [pokud lt IE 9]>
script src = "/ path / to / flashcanvas.js"> / script>
! [endif] ->
To automaticky nahradí každý plátno> prvek v počátečním označení stránky s instancí pluginu .swf. Pokud později na stránku dynamicky přidáte plátno, budete jej muset ručně inicializovat:
FlashCanvas.initElement (newCanvasElement);
Po inicializaci můžete zavolat canvas.getContext ("2d") a přistupovat ke zbytku API plátna jako obvykle.
Poznámky
Kromě zjevného omezení vyžadujícího, aby vaši uživatelé měli nainstalovaný modul Flash, je vykreslování FlashCanvas vysoce kompatibilní se specifikacemi a rychlé. Pokud je pro vás vyžadování modulu plug-in jistič řešení, je ExplorerCanvas (aka Excanvas) další možností, která se vykresluje pomocí VML, ale je mnohem méně úplná a mnohem pomalejší, takže se obecně nedoporučuje.
Doporučení
Používejte s důvěrou, ale mějte plán degradace pro uživatele bez nainstalovaného pluginu.
09. MediaElement.js
URL projektu: http://mediaelementjs.com/
Soubor MediaElement.js od Johna Dyera funguje ve dvou částech. Nejprve to polyfills podporu pro video> a audio> prvky, včetně HTML5 MediaElement API, ve starších prohlížečích pomocí Flash nebo Silverlight pluginy. Poskytuje také atraktivní uživatelské rozhraní přehrávače médií pro tyto prvky, které je konzistentní ve všech prohlížečích, pokud jej chcete použít.
Používání
Stáhněte si nejnovější distribuci z domovské stránky projektu a rozbalte ji do struktury vašeho webu. Zahrnout šablonu stylů a skript do souboru hlava> vaší stránky spolu se závislostí jQuery (Zepto bude také fungovat):
odkaz rel = "stylesheet" href = "/ cesta / k / mediaelementplayer.min.css">
script src = "/ path / to / jquery.js"> / script>
script src = "/ path / to / mediaelement-and-player.min.js"> / script>
Poté ve spodní části tělo>, inicializujte hráče pro libovolné video> nebo audio> prvky v dokumentu:
skript>
$ ('Video, audio'). Mediaelementplayer ();
/ skript>
V dokumentaci najdete možnosti, které můžete předat metodě vytvoření přehrávače, a pokyny k použití samostatného přehrávače MediaElement konstruktor k polyfill API bez uživatelského rozhraní hráče.
Poznámky
Jako vždy je nekonzistentní podpora video a audio kodeků mezi prohlížeči obtížná. MediaElement.js vám může také pomoci tím, že spustí Flash / Silverlight přehrávač jako záložní v prohlížečích, které podporují mediální prvky HTML5, ale ne správný kodek. Podrobnosti najdete v matici podpory kodeků na její domovské stránce.
Doporučení
Důrazně doporučujeme, pokud ne pro polyfill API, pak pro jeho vynikající přizpůsobitelné uživatelské rozhraní hráče.
10. Webshims Lib
URL projektu: http://afarkas.github.com/webshim/demos/
Spíše než polyfilling any features itself, Alexander Farkas's Webshims Lib agreguje spoustu dalších polyfills dohromady do jednoho balíčku a podmíněně načte pouze ty, které potřebuje hostující prohlížeč.
Používání
Stáhněte si nejnovější distribuční balíček a rozbalte jej někde ve struktuře webu. Do souboru zahrňte následující položky hlava> vaší stránky:
script src = "/ path / to / jquery.min.js"> / script>
script src = "/ path / to / js-webshim / minified / extras / modernizr-custom.js"> / script>
script src = "/ path / to / js-webshim / minified / polyfiller.js"> / script>
skript>
// Načíst všechny podporované polyfills, pokud je prohlížeč potřebuje:
$ .webshims.polyfill ();
/ skript>
Pokud chcete, můžete použít vlastní sestavení Modernizr namísto poskytnutého. Alternativně můžete také určit seznam požadovaných funkcí, abyste přeskočili detekci zbytečných funkcí:
skript>
// Načíst pouze tyto polyfill, pokud je prohlížeč potřebuje:
$ .webshims.polyfill ("canvas mediaelement");
/ skript>
Poznámky
Jeho závislost na jQuery a Modernizr plus samotný ne tak malý polyfiller.js z něj dělají trochu těžkou váhu. Pokud používáte pouze několik podporovaných funkcí, může podmíněné zahrnutí jednotlivých polyfillů jednotlivě vést k menší celkové velikosti souboru.
Doporučení
Použijte jej, pokud váš web používá mnoho podporovaných funkcí společně.
Jason Johnston www.css3pie.com je webový softwarový inženýr společnosti Sencha a tvůrce polyfillu CSS3 PIE. Klasicky vycvičený hudebník s diplomem v oboru klavírní techniky přistupuje k psaní softwaru jako k hudbě: dynamická směsice umění a vědy vyžadující neustálé procvičování, kde je vždy prostor pro další zdokonalování a kreativitu.
