Share
În această rundă vom analiza 5 biblioteci JavaScript care pot ușura cu adevărat dezvoltarea unor site-uri web moderne și atractive. Bibliotecile pe care le vom analiza nu sunt biblioteci în același sens ca ceva de genul jQuery sau YUI; sunt mult mai mici și mult mai specializate. Dar ei sunt cei mai buni la ceea ce fac și oferă funcționalități unice.
DD_belatedPNG a fost creat pentru un singur scop de a permite PNG-urilor alfa-transparente să fie utilizate în IE6 fără a recurge la proprietatea Microsoft AlphaImageLoader filtru. Ca oricine a încercat să utilizeze PNG-uri în IE6 înainte de a știe, deși pot fi făcute să lucreze la un grad foarte de bază, lucruri ca imaginile de fundal repetate sunt în afara de întrebare.
Folosirea filtrului AlphaImageLoader rezolvă doar jumătate din problema PNG din IE6 deoarece poate fi utilizată numai cu imaginile de fundal. Pentru a utiliza PNG alfa-transparente elemente, este utilizată o altă soluție, care este de obicei remedierea HTC care se bazează pe un fișier de comportament PNG transparent și un comportament HTC. În plus, deoarece utilizatorii Firebug și YSlow vor fi conștienți de faptul că AlphaImageLoader de la Microsoft este lent; unul dintre instrucțiunile YSlow este de a evita filtrul cu orice preț.
DD_belatedPNG utilizează implementarea de către VML a VML pentru a înlocui PNG-urile cu elemente VML, care acceptă transparența alfa. Poate fi folosit cu ambele complet elemente și imagini de fundal CSS. Când imaginile de fundal sunt înlocuite, caracteristici comune, cum ar fi
fundal repetare și :planare stările pot fi de asemenea folosite, astfel încât această bibliotecă rezolvă toate problemele comune PNG din IE6.
Utilizarea DD_BelatedPNG este extrem de ușoară; trebuie doar să fie utilizat cu IE6, deci scriptul principal poate fi inclus în pagină folosind un comentariu condiționat:
Biblioteca are o singură metodă, fixă, care este utilizată pentru a furniza selectori simpli CSS care sunt vizați de bibliotecă element care are un atribut PNG src sau orice element care utilizează un fond PNG CSS cu numele de clasă de potrivire va fi fixat. Această parte a scenariului poate intra și în comentariile condiționate, astfel încât doar IE6 va trebui să proceseze aceste reguli suplimentare:
Fișierele PNG fixe din IE6 vor apărea așa cum ar trebui și pot fi poziționate pe fundal și repetate și pot lucra și cu: state hover, spre deosebire de filtrul propriu-zis al Microsoft. Următoarea imagine prezintă o imagine înainte și după o imagine de fundal transparentă alfa:
Tipografia este o zonă a dezvoltării web care a înregistrat progrese dureroase în comparație cu alte domenii ale industriei. Dezvoltatorii web au fost nevoiți să se bazeze pe un mic set de fonturi "web safe", care ar putea fi instalate pe majoritatea computerelor vizitatorilor. Au apărut soluții bazate pe imagini și flash, ambele având dezavantajele utilizării.
Cufon oferă dezvoltatorilor o soluție robustă și rapidă, care poate fi afișată în browser fără a necesita pluginuri de la terțe părți, utilizând funcții încorporate în browsere. Fonturile Cufon pot fi utilizate ca VML pentru implementarea IE nativă, sau
Această bibliotecă diferă de celelalte prin faptul că este necesar un pic de pregătire înainte de utilizare; este necesar să se genereze un nou fișier de fonturi care să poată fi făcut cu ușurință utilizând site-ul cufon. Generatorul va genera un font SVG și îl va salva într-un fișier JS. Acest fișier trebuie apoi să fie conectat la oricare altul
Apoi este doar un caz de a spune Cufon ce elemente să înlocuiască:
API oferă alte soluții pentru utilizarea mai multor fonturi pe aceeași pagină și pentru îmbunătățirea performanței în IE. Deși am denumit această secțiune, "Utilizarea oricărui font" ... trebuie să vă amintiți că ar trebui folosite numai fonturile care sunt licențiate pentru a fi încorporate. Următoarea captura de ecran afișează o rubrică înlocuită:
Firebug este fără îndoială unul dintre cele mai mari resurse de dezvoltare web disponibile; Cu siguranță o folosesc zilnic atunci când dezvoltam pentru web și știu că este pluginul de alegere pentru mulți alții. Un efect secundar neplăcut al excelenței Firebug este acela că alte instrumente similare pentru alte browsere sunt în comparație și par inferioare. Probleme legate de aspectul problemelor și bug-uri CSS în IE, de exemplu, pot fi o lecție de fuziune.
Aici intră Firebug Lite; aceasta este o bibliotecă simplă JavaScript care reînnoiește majoritatea caracteristicilor cheie ale interfeței Firebug, aducând debuggerul nostru la alegere tuturor celorlalte platforme. Rezolvarea aspectelor și rezolvarea problemelor legate de browser încrucișat devin din nou ușor.
Unul dintre cele mai mari lucruri despre Firebug Lite este că nu aveți nevoie să îl descărcați sau să instalați nimic pentru a începe să îl utilizați; când doriți să debugați o pagină pe care lucrați în browsere care nu sunt Firefox, puteți să includeți doar un fișier de script al cărui SRC indică versiunea online:
Asta este, atunci când rulați pagina în orice alt browser, Firebug Lite va fi prezent pe pagină. Pentru utilizarea offline, fișierul script, precum și un fișier CSS, pot fi descărcate și trebuie doar să fie utilizate ca orice alt fișier JS sau CSS. Următoarea imagine a ecranului arată Firebug Lite în Safari:
Bine, această bibliotecă nu este atât de mică, dar există un motiv pentru asta; biblioteca face o gamă largă de lucruri și adaugă control complet SVG la o pagină web. Sincer, puterea sa este minunată. Imaginați-vă că puteți să trageți curbe netede pe o pagină web și să creați forme personalizate în zbor - Raphael face asta.
Puteți face colțuri rotunjite, care sunt complet încrucișate, fără imagini (altele decât cele desenate de bibliotecă), puteți crea reflexii estompate pentru orice imagine, rotiți imaginile dinamic și mult mai mult. Deoarece toate traseele sunt desenate folosind elementele SVG, le puteți atașa evenimente JavaScript, astfel încât oamenii să poată interacționa cu imaginile pe mouseover sau pe clic (sau orice alte evenimente JS). Posibilitățile sunt nesfârșite, iar API oferă o gamă largă de metode diferite care fac ca lucrul cu biblioteca să fie o plăcere.
Bineînțeles, biblioteca trebuie să fie legată de:
This is it, there are no other dependencies. Now we can begin creating our SVG shape:
Biblioteca este făcută ușor de utilizat și am folosit doar o mică parte a capabilităților sale în acest exemplu. Pagina pe care se utilizează aceasta ar trebui să apară astfel:
Este un moment interesant pentru dezvoltarea de aplicații web cu CSS3 și HTML5 care avansează în cursul zilei, dar este și un timp frustrant pentru că avem toate aceste tehnologii avansate noi cu un sprijin foarte redus. Vrem să începem să folosim toate noile caracteristici noi HTML5 și CSS3, dar majoritatea elementelor noi HTML5 sunt suportate, de exemplu, doar într-un singur browser.
Modernizr este o mică bibliotecă mică, care testează pur și simplu dacă mediul actual suportă o serie de caracteristici avansate, cum ar fi noul
Biblioteca adaugă, de asemenea, nume de clase la element pe care îl putem viza cu CSS pentru a ascunde anumite elemente de pagină, astfel încât atunci când
Acest lucru este incredibil, deoarece înseamnă că putem adăuga în siguranță aceste noi caracteristici pe paginile noastre pentru browserele care le suportă, fără a provoca haos în browserele care nu o fac. În virtutea îmbunătățirii progresive, putem crea un nucleu de conținut accesibil și larg acceptat și apoi să adăugăm progresiv mai multe și mai multe funcții pentru browserele care le suportă.
Să vedem în acțiune pentru a afișa câteva efecte interesante pentru CSS3; mai întâi ne legăm doar la biblioteca foarte mică folosind standardul
Apoi putem adăuga următorul CSS:
.nr-audio #audioContainer display: none;
Acest lucru va asigura că browserele care nu acceptă
Conectați-vă la audio
Odată ce acest lucru se face, putem detecta dacă browserul acceptă audio HTML5 și arăta sau ascunde linkul către mass-media (am putea face acest lucru cu ajutorul CSS-ului, dar în acest fel vom vedea obiectul Modernizr în acțiune):
Accentsconagua
dacă (Modernizr.audio) var audioLink = document.getElementById ("linkToAudio"); audioLink.style.display = "none"; Acesta este tot ce ne trebuie; browserele capabile vor vedea
Fiecare dintre aceste biblioteci răspunde unei probleme foarte specifice; ele sunt, în general, mult mai mici decât bibliotecile mai bine cunoscute și de uz general, dar la fel de utile pentru scopul lor specializat. Fiecare dintre ele ne poate ajuta într-un fel sau altul atunci când dezvoltăm site-uri web fie prin dezvoltarea ușoară a IE6, folosind fonturi nestandard fără tehnici de înlocuire greoaie, pentru a detecta suport pentru cele mai recente tehnologii CSS3 și HTML5 sau pentru a genera imagini complexe și interactive.
