10 parimat polüfülli

Autor: Peter Berry
Loomise Kuupäev: 17 Juuli 2021
Värskenduse Kuupäev: 13 Mai 2024
Anonim
THE FLOOR IS LAVA at SCHOOL CHALLENGE !
Videot: THE FLOOR IS LAVA at SCHOOL CHALLENGE !

Sisu

HTML5-standardseid funktsioone ja API-sid jäljendavad aluspinnad, mida tavaliselt nimetatakse polüfillideks, muutuvad üha tavalisemaks, kui arendajad püüavad veebi edasi lükata. Modernizri kogukond haldab ammendavat nimekirja teadaolevatest polüfillidest, mis sisaldab sadu erineva terviklikkuse ja kvaliteediga projekte. Siin on 10 soovitatavat polüfülli, mis on tänapäeval parimate seas ja enimkasutatavate seas.

01. html5shiv

Projekti URL: https://github.com/aFarkas/html5shiv

9-le eelnenud IE versioonides meeldivad tundmatutele HTML-elementidele jaotis> ja nav> sõelutakse tühjade elementidena, purustades lehe pesastamisstruktuuri ja muutes need elemendid stiilseteks. Üks enimkasutatavatest polüfillidest täidab html5shiv selle vea kõrvaldamiseks veel ühte IE veidrust: helistamine document.createElement ("sildi nimi") iga uue HTML5 elemendi jaoks, mis paneb IE neid võluväel õigesti sõeluma. See sisaldab ka nende HTML5-elementide põhilist vaikestiili.


Kasutamine

Laadige alla fail html5shiv.js (või kui vajate printimistuge, html5shiv-printshiv.js) dist kataloogi ja pange see oma saidifailidesse. Toimivuse optimeerimiseks viige skriptifail oma dokumendi päisesse> pärast kõiki stiililehti. Pakkige see tingimuslikesse kommentaaridesse, nii et selle laadivad alla ainult vanemad IE versioonid, kes seda vajavad.

! - [kui see on IE 9]>
skript src = "path / to / html5shiv.js"> / skript>
! [endif] ->

Märkused

Kui kasutate Modernizri, on tõenäoline, et html5shiv on teie jaoks juba lisatud, seega pole teil vaja seda uuesti lisada.

Soovitus

Kasutage seda kindlasti, kui kasutate HTML5-elemente ja teie saiti külastatakse vanalt IE-lt. See pole mõttetu.

02. -prefiksivaba


Projekti URL: http://leaverou.github.com/prefixfree/

Ehkki enamik polüfülletäiteid on suunatud aegunud brauseritele, on mõned olemas selleks, et kaasaegseid brausereid lihtsalt natuke rohkem edasi lükata. Lea Verou prefiksivaba polüfill on selline polüfill, mis võimaldab praegustel brauseritel ära tunda mitme CSS3 atribuudi eeltäidetud versiooni, selle asemel et nõuda kõigi hankija eesliidete välja kirjutamist. See loeb teie lehe stiililehed ja asendab kõik prefiksimata atribuudid nende praeguse brauseri poolt tuvastatud eesliidetega.

Kasutamine

Laadige prefiksfree.min.js projekti kodulehelt alla oma saidi kataloogi. Lisage see oma lehele pea> kohe pärast kõiki teie stiililehti.

link rel = "stiilileht" href = "/ css / styles.css">
skript src = "/ path / to / prefixfree.min.js"> / skript>

Märkused

Suurimad piirangud on kirjeldatud projekti kodulehel. Nagu alati, mõõtke oma lehe tajutavat laadimisaega, kui polüfill on paigas, veendumaks, et CSS-i kliendipoole laadimise ja ümberkirjutamise aeg ei põhjusta märgatavat viivitust.


Ka CSS-i eeltöötleja nagu Sass võib olla hea alternatiiv, ehkki see eeldab siiski kogu eesliidetud CSS-i saatmist üle võrgu. Kaalutage eeltöödeldud CSS-i suurus võrreldes prefiksivaba polüfillide suurusega pluss selle töötlemisaeg.

Soovitus:

Kasutage seda juhul, kui olete mures oma CSS-i suuruse pärast või olete eesliidete atribuutide kirjutamise pärast häiritud.

03. Selectivizr

Projekti URL: http://selectivizr.com/

Keith Clarki Selectivizr on populaarne polüfill, mis paneb paljud CSS3 selektorid töötama IE 8-s ja vanemates versioonides. See loeb lehe stiililehti, otsides paljusid teadaolevaid CSS3 valijaid, seejärel kasutab JavaScripti valikute teeki, et pärida dokumendilt nendele valijatele vastavaid elemente, rakendades stiilid neile elementidele otse. See toetab mitut JavaScripti valija teeki, millest ühte kasutate tõenäoliselt juba oma lehel.

Kasutamine

Laadige alla jaotuspakett ja pakkige see kuskil oma saidi kataloogis lahti. Viide selivizr-min.js-le pea> oma lehe viite järel teie valitud JS-i valikuteeki (jQuery allpool toodud näite koodis). Pakkige see tingimuslikku kommentaari, nii et selle laadivad alla ainult vanad IE-d ja soovi korral kasutage a noscript> lisada varundusstiil.

skripti tüüp = "text / javascript" src = "/ path / to / jquery.min.js"> / skript>
! - [if (gte IE 6) & (lte IE 8)]>
skripti tüüp = "text / javascript" src = "/ path / to / selectivizr-min.js"> / skript>
noscript> link rel = "stiilileht" href = "/ path / to / fallback-styles.css" /> / noscript>
! [endif] ->

Märkused

Peamised hoiatused on kirjeldatud selectivizr.com allosas. Kõige tähtsam on see, et päringut käitatakse üks kord lehe laadimisel ja see ei käsitle automaatselt DOM-i dünaamilisi täiendusi, mis takistab selle kasutamist dünaamilistel saitidel.

Soovitus

Kasutage lihtsatel staatilistel lehtedel, kuid järgige muid traditsioonilisi meetodeid (nt lihtsad klassid) suurtel või väga dünaamilistel lehtedel.

04. Flexie

Projekti URL: http://flexiejs.com/

Võimalik, et CSS3 üks oodatumaid omadusi, paindlik kasti paigutus (ka Flexbox) tõotab olla äärmiselt võimas tööriist liideseelementide paigutamiseks. WebKiti ja Mozilla mootorid on esialgset mustandsüntaksit toetanud juba aastaid. Flexie rakendab IE ja Operas sama süntaksit.

Pidage siiski meeles, et spetsifikatsiooni mustand on uue (ja palju võimsama!) Süntaksi drastiliselt läbi vaadatud, mida Flexie veel ei toeta. Saate endiselt kasutada Flexie't koos vana süntaksiga, kuid kindlasti lisage uus süntaks ka tulevaste brauserite jaoks.

Kasutamine

Laadige Flexie oma saidile alla ja viige pärast stiililehti oma lehele flexie.min.js koos oma valitud JS-valikumootoriga nagu jQuery.

skript src = "/ path / to / jquery.min.js"> / skript>
skript src = "/ path / to / flexie.min.js"> / skript>

Kasutage CSS-is Flexboxi stiile (vana süntaks, millele järgneb uus) ning Flexie leiab ja renderdab need IE-s automaatselt:

.toolbar {
/ * vana süntaks: * /
kuva: -webkit-box;
kuva: -moz-box;
kuva: kast;
-webkit-box-orienteeritud: horisontaalne;
-moz-box-orienteeritud: horisontaalne;
kasti-orientatsioon: horisontaalne;

/ * uus süntaks: * /
kuva: painduv;
painde suund: rida;
}

.toolbar> .message {
/ * vana süntaks: * /
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;

/ * uus süntaks: * /
painduma: 1;
}

Märkused

Lisaks süntaksiprobleemile lugege kindlasti projekti Readme nõudeid ja hoiatusi tavaliste probleemide kohta. Flexie kasutab Selectivizri baasmootorit, seega kehtivad ka samad piirangud.

Soovitus

Kasutage ettevaatusega ainult siis, kui vajate Flexboxi paigutust ja jälgige paigutuse kiirust.

05. CSS3 PIE

Projekti URL: http://css3pie.com

PIE („Progressive Internet Explorer”) rakendab IE-s populaarseimaid puuduvaid CSS3 kasti kaunistamise omadusi, sealhulgas piiri raadius ja kast-vari IE 8 ja alla selle puhul ning lineaarse gradientiga taustad IE 9 ja alla selle. HTC-käitumisena (varalise IE funktsioonina) kutsutuna otsib see kindlatel elementidel toetamata CSS3 atribuute ja renderdab need atribuudid, kasutades VML-i IE 6-8 ja SVG-d IE 9 jaoks. Selle renderdamine ei erine enamasti brauseri natiivsest rakendusest ja see saab dünaamilise DOM-i modifitseerimisega hästi hakkama.

Kasutamine

Laadige alla jaotuspakett ja pakkige see kuskil saidi kataloogis lahti. Lisage oma CSS-is iga CSS3 atribuute sisaldava reegli jaoks a käitumine atribuut, mis osutab PIE.htc-le (pidage meeles, et suhteliste teede alus on lehe URL, mitte CSS-fail, nagu tavaliselt oodata võiks.)

.box {
piiri raadius: 8px 8px 0 0;
kasti vari: # 666 0px 2px 3px;
käitumine: url (/path/to/PIE.htc);
}

Märkused

Enamik levinumaid probleeme on saidil dokumenteeritud. HTC käitumine võib olla kohati pisut keeruline, nii et on olemas ka eraldiseisev PIE.js versioon, mida saab kasutada käsitsi alternatiivsena.

Renderdamisprotsess on intensiivne ja PIE eelistab täpsust kiiruse suhtes, nii et jälgige, et te ei kasutaks seda liiga paljude elementide peal, et vältida märgatavat viivitust lehe laadimisel.

Soovitus

Kasutage säästlikult ja ainult siis, kui peate seda tõesti tegema. Dekoratsioonistiilid ei ole saidi funktsionaalsuse seisukohalt tavaliselt kriitilised, seetõttu on tavaliselt eelistatav graatsiline degradeerimine.

06. JSON 2

Projekti URL: https://github.com/douglascrockford/JSON-js

Douglas Crockford kirjutas algselt json2.js API-na oma tulevase JSON-andmevormingu lugemiseks ja kirjutamiseks. Seda hakati nii laialdaselt kasutama, et brauserite tootjad otsustasid selle API loomulikult juurutada ja muuta selle de facto standardiks; json2.js muudeti raamatukogust polüfilliks pärast seda.

Kasutamine

Laadige json2.js alla oma saidi kataloogi ja viitage see skriptielemendis. JSON-i loomulikult toetavate brauserite allalaadimise vältimiseks võite selle dünaamiliselt kaasata globaalse JSON-i objekti kontrolli alusel:

skript>
kui (! window.JSON) {
document.write (’skript src =" path / to / json2.js "> / script>’);
}
/ skript>

Märkused

Vaadake ka seondumatut JSON 3 projekti, mis rakendab kiiruse hinnaga sama API täiustatud korrektsuse ja turvalisusega.

Soovitus

Kasutage seda kindlasti, kui peate JSON-andmetega töötama vanemates brauserites.

07. es5-shim

Projekti URL: https://github.com/kriskowal/es5-shim/

ECMAScript 5. väljaanne (“ES5”) toob kaasa mõned uued käepärased skriptimisfunktsioonid ja kuna need on süntaktiliselt ühilduvad vanemate JavaScripti mootoritega, saab neid enamasti polüesterlaadida sisseehitatud JS-i objektide lappimisega. See es5-shim polüfill täidab seda kahes osas: es5-shim.js, mis sisaldab neid meetodeid, mida saab täielikult polüfileerida, ja es5-sham.js, mis sisaldab teiste meetodite osalist rakendamist, mis tuginevad liiga palju selle aluseks olevale mootorile, et see täpselt töötaks.

Kasutamine

Laadige projekti hoidlast alla saidi kataloogi es5-shim.min.js (ja / või es5-sham.min.js). Lisage see oma lehele enne muid skripte, mis kasutavad ES5 funktsioone.

skript src = "/ path / to / es5-shim.min.js"> / skript>

Märkused

Kui vajate ainult mõnda ES5 meetodit, on lähtekood es5-shim.js hästi dokumenteeritud, nii et saate hõlpsalt eemaldada mittevajalikud ja kärpida failisuurust.

Väga julgete jaoks teeb es6-shim sama ka ECMAScript 6 põhiosade puhul. ES6-l on siiski vähem süntaktiliselt ühilduvaid funktsioone ja väga vähesed brauserid toetavad seda veel loomulikult, seega on selle eelis selles punktis minimaalne.

Soovitus

Kindlasti kasutage seda, kui teie JavaScripti kood saab kasutada ES5 meetodeid, nii et tänapäevased brauserid saaksid kasutada kiiret algset juurutamist.

08. FlashCanvas

Projekti URL: http://flashcanvas.net/

FlashCanvas on täpselt see, mida selle nimi vihjab: HTML5 Canvas API juurutamine Flash-pistikprogrammi abil. Haruldane kaubanduslik polüfill, see on tasuline ’pro’ versioon ja ka tasuta versioon, millel puuduvad vaid mõned täpsemad funktsioonid nagu varjud.

Kasutamine

Laadige alla levitamine, mida soovite kasutada, ja pakkige see kuskil oma saidi kataloogis lahti. Viide flashcanvas.js saidilt pea> teie lehe tingimuslikku kommentaari:

! - [kui see on IE 9]>
skript src = "/ path / to / flashcanvas.js"> / skript>
! [endif] ->

See asendab automaatselt kõik lõuend> element lehe esialgses märgistuses .swf pistikprogrammi eksemplariga. Kui lisate lehele hiljem dünaamiliselt lõuendi, peate selle lähtestama käsitsi.

FlashCanvas.initElement (newCanvasElement);

Pärast vormindamist saate helistada canvas.getContext ("2d") ja pääsete ülejäänud lõuendi API-le juurde nagu tavaliselt.

Märkused

Lisaks ilmsele piirangule, mis nõuab teie kasutajatelt Flash-pistikprogrammi installimist, on FlashCanvase renderdamine väga spetsifitseeritud ja kiire. Kui pistikprogrammi nõudmine on teie jaoks tehingumurdja, on ExplorerCanvas (teise nimega Excanvas) veel üks võimalus, mis renderdab VML-i, kuid see on palju vähem täielik ja palju aeglasem, nii et seda pole üldiselt soovitatav.

Soovitus

Kasutage enesekindlalt, kuid kasutage degradatsiooniplaani kasutajatele, kellel pole pistikprogrammi installitud.

09. MediaElement.js

Projekti URL: http://mediaelementjs.com/

John Dyeri MediaElement.js töötab kahes osas. Esiteks täidab see video- ja heli> elementide, sealhulgas HTML5 MediaElementi API tugi vanemates brauserites, kasutades Flash- või Silverlighti pistikprogramme. Samuti pakub see nende elementide jaoks atraktiivset meediumipleieri kasutajaliidest, mis on ühtne kõigis brauserites, kui soovite seda kasutada.

Kasutamine

Laadige projekti kodulehelt alla uusim levitamine ja pakkige see oma saidi struktuuri. Kaasa stiililehe ja skripti pea> oma lehest koos jQuery sõltuvusega (töötab ka Zepto):

link rel = "stiilileht" href = "/ path / to / mediaelementplayer.min.css">
skript src = "/ path / to / jquery.js"> / skript>
skript src = "/ path / to / mediaelement-and-player.min.js"> / skript>

Seejärel allosas keha>, lähtestage mängija mis tahes jaoks video> või heli> elemendid dokumendis:

skript>
$ (’Video, heli’). Mediaelementplayer ();
/ skript>

Vaadake dokumentatsioonist valikuid, mida saate mängija loomisviisile edastada, ja juhiseid iseseisva kasutamise kohta MediaElement konstruktor API täitmiseks ilma mängija kasutajaliideseta.

Märkused

Nagu alati, on brauserite vastuoluline video- ja helikoodeki tugi keeruline probleem. MediaElement.js võib teid ka seal aidata, käivitades Flash / Silverlighti mängija varukoopiaks brauserites, mis toetavad HTML5 meediaelemente, kuid mitte õiget koodekit. Täpsema teabe saamiseks vaadake kodekite toe maatriksit selle kodulehelt.

Soovitus

Äärmiselt soovitatav, kui mitte polüfileeritud API, siis selle suurepärase kohandatava mängija kasutajaliidese jaoks.

10. Veebiseansid Lib

Projekti URL: http://afarkas.github.com/webshim/demos/

Selle asemel, et ise mingeid funktsioone polüfoonida, koondab Alexander Farkas’s Webshims Lib hulga muid polüfileid ühte paketti ja laadib tingimuslikult ainult need, mida külastav brauser vajab.

Kasutamine

Laadige alla uusim jaotuspakett ja pakkige see oma saidi ülesehitusse. Lisage järgmisse pea> oma lehe:

skript src = "/ path / to / jquery.min.js"> / skript>
skript src = "/ path / to / js-webshim / minified / extras / modernr-custom.js"> / skript>
skript src = "/ path / to / js-webshim / minified / polyfiller.js"> / skript>

skript>
// Laadige kõik toetatud polüfillid, kui brauser neid vajab:
$ .webshims.polyfill ();
/ skript>

Soovi korral saate kasutada kohandatud Modernizri ehitust pakutava asemel. Samuti võite soovimatute funktsioonide tuvastamise vahele jätta soovimatute funktsioonide loendi:

skript>
// Laadige ainult need polüfillid, kui brauser neid vajab:
$ .webshims.polyfill ("lõuend mediaelement");
/ skript>

Märkused

Selle sõltuvus jQueryst ja Modernizrist ning lisaks veel mitte nii pisike polyfiller.js ise muudab selle natuke raskeks. Kui kasutate ainult mõnda toetatud funktsiooni, võib nende polüfillide eraldi lisamine ise tingimata põhjustada väiksema failimahu.

Soovitus

Kasutage seda, kui teie sait kasutab paljusid toetatud funktsioone koos.

Jason Johnston www.css3pie.com on Sencha veebitarkvara insener ja CSS3 PIE polüfilli looja. Klassikaliselt koolitatud muusik, kellel on kraad klaveri esituses, läheneb tarkvara kirjutamisele nagu muusikale: kunsti ja teaduse dünaamiline segu, mis nõuab pidevat harjutamist, kus on alati ruumi edasiseks täiustamiseks ja loovuseks.

Eelmine Artikkel

Ärka üles ja nuusuta roose. Veel parem - joonista mõned
Järgmine Artikkel

Sisustrateegia 101, 2. osa: andmete mõtestamine
Nõukogude
Kuidas teenida disainerina raha: 4 professionaalset näpunäidet
Loe Rohkem

Kuidas teenida disainerina raha: 4 professionaalset näpunäidet

Mai 2024
Creativepooli iga-aa tane palgajuhend ja -uuring annavad väärtu liku ülevaate, mida tähendab töötada uurbritannia täna e loomemajandu e . Uuride üle 2500 loomep...
Kuidas kujundada kõrglahutusega ekraane
Loe Rohkem

Kuidas kujundada kõrglahutusega ekraane

Mai 2024
Veebidi aini pet iali t Chri topher chmitt va tab po itiiv elt kü imu ele, ka peak ime oma kujundu metoodikate e arve tama kõrglahutu ega kuvarite abil: „Varem olid meil brau eri õjad. ...
12 parimat õppematerjali illustraatoritele
Loe Rohkem

12 parimat õppematerjali illustraatoritele

Mai 2024
Olenemata elle t, ka olete illu trat ioonide e makordne ka utaja või olete kogenud profe ionaal, on alati rohkem õppida. Kuid nii paljude võimalu te korral aate teada, kuhu oma aega uun...