CSS sprite: descriere, tehnici de bază și recomandări utile

Un site web modern ar trebui să fie rapid, frumos și eficient atât la etapa de proiectare, cât și la lucrul cu clientul. De regulă, fiecare companie care creează resurse Internet aspiră să aibă propria persoană, atrage vizitatorii prin designul, stilul, fiabilitatea, viteza și alte calități.

Proprietăți utile ale spritelor

Spritele CSS permit îmbunătățirea atât a caracteristicilor calitative ale unui site, cât și a imaginii companiei. În esență, acest lucru nu este un instrument de dezvoltare foarte complex, dar accelerează cu adevărat procesul de dezvoltare a resurselor și viteza muncii lor.

Printre altele, se simplifică codul și, într-un anumit sens, este portabil la alte resurse care, datorită faptului că utilizate CSS-sprite sunt similare ca rudele apropiate, pentru că puteți utiliza dialogul idei aceleași grafice, elemente de design stil, structura și conținutul etichetelor.

În procesul obișnuit de dezvoltare a site-ului, trebuie să faceți o mulțime de fotografii. Foarte des, aceste imagini ocupă foarte puțin spațiu, dar ele sunt întotdeauna un fișier separat. Pentru orice sistem de operare al oricărui server, deschiderea unui fișier este o operație care durează mult timp, dar nu va diferi în mod semnificativ în timp când un fișier este deschis cu 13 până la 13 pixeli și când se deschide un fișier de 16 imagini 52 cu 52 de pixeli. În primul caz, trebuie să aveți 16 fișiere și 16 operații deschise / citite, în al doilea caz, 16 imagini vor fi obținute prin deschiderea unui singur fișier.

Dacă creați seturi de astfel de fișiere pe subiect (meniu orizontal, forme ale dialogului, butoane de calculator, elemente de design calendaristic ...), astfel de seturi de imagini pot fi transferate de pe site la site.

Partea din spate a monedei

Când există fani care sunt prea repede să recomande utilizarea de spioni CSS, asigurați-vă că îi găsiți pe cei care studiază cu atenție întrebarea și arată în mod inteligent că este întotdeauna mai practic să lucrați în mod vechi.

Într-adevăr, dacă în loc de 16 fișiere imagine există un fișier de 16 imagini, atunci în loc de 16 operațiuni de deschidere / citire va exista una. Dar trucul este că fiecare browser are o memorie cache, și o încarcă doar ca o ultimă soluție. În plus, de obicei, elementele de pagină sunt încărcate prima dată când vizitați pagina și apoi sunt descărcate numai cele modificate.

Un alt aspect. De obicei, imaginile sunt tăiate mai degrabă decât lipite într-un singur fișier. Cumva sa dezvoltat tehnologia, e mai bine să spun, obiceiul. Designerul creează un aspect, iar aspectul folosește piesele sale: părți ale aspectului fin tăiate. Oponenții sprites consideră că colecția de mai multe imagini într-un singur fișier este o sarcină care consumă mult timp, mărind timpul general de dezvoltare al paginii.

Există, de asemenea, dezvoltatori care iau în considerare și optimizează numărul de cereri HTTP, considerând că această activitate este mai pragmatică decât spionii CSS.

Toate momentele indicate, fără îndoială, au semnificație, însă opinia este mult mai importantă: totul ar trebui aplicat în limite rezonabile.

Automatizare și spioni CSS

Dacă nu există nici un sens în rularea generatorului de sprite CSS și obținerea părții potrivite a designului, nu este nimic de oprit doar făcând acea parte în mod obișnuit. Dacă tehnologia obișnuită duce la necesitatea de a tăia sute de imagini, este preferabil să schițați o funcție jаvascript care va selecta în mod necesar zona dorită din sprite și va afișa.

Trebuie remarcat, totuși, că sprite a două sau trei elemente, sau o altă duzină - Bine, dar atunci când în sute sprite desene, unele cu scris probleme jаvascript-funcția, desigur, nu va avea loc, dar cât de mult de lucru va duce la crearea o astfel de sprite mare ... În plus, poze lipici - acest generator sprite un CSS și face imaginea dorită, și CSS-cod pentru ea, nu-i păsa cât de mult va elementele constitutive ale sprite. Problemele apar atunci când reproiectați site-ul, schimbați designul, ștergeți și adăugați elemente noi. Când dezvolți un sprite, nu trebuie să te gândești cum să îl folosești, ci cum să îl schimbi mai târziu.

Beneficiile tematice ale utilizării spritelor

Spre deosebire de limbile de programare CSS, acesta este un set relativ static de reguli, toate dinamica sa fiind determinată de reguli și conținutul lor funcțional (prin standard). Luând în considerare în spritele complexe, HTML, CSS puteți crea biblioteci tematice de design-funcțional.

De exemplu, versiunea finită a meniului: pur și simplu prin conectarea mai multor reguli css, funcții js și inclusiv în cod unele HTML-divs, puteți obține rezultatul. Prin modificarea conținutului imaginii sprite, puteți schimba aspectul acestui meniu. Prin specificarea corpului funcției, puteți regla funcția.

Obțineți o versiune originală programarea orientată pe obiecte (OOP). Fără îndoială, aceasta va fi o idee luminată, dar nu va fi distinsă prea viu față de alte dialecte ale OOP în limbi reale. Este doar în începutul anilor `90, când OEP a fost reînviat și a devenit neobișnuit de a obține rapid un loc în soare, este o idee specifică și o formă concretă de exprimare sale, dar acum dezvoltatorii au venit cu cât mai multe dialecte ca nu are diverse Rusă.

Jucării - o mină de aur pentru sprites

Excitarea și programarea sunt concepte incompatibile, însă calificarea programelor de scriere a programatorilor diferă semnificativ de cele comune (codificare simplă) și creative (proiectarea și dezvoltarea de noi tehnologii, idei).

Game Design face apel la grafică vectorială, deoarece combinația de SVG-sprite + CSS-reguli nu numai cerere, dar de multe ori devine obiectul dezvoltator (a site-ului) la obiectul unui joc adevărat. În special, jocul popular Counter Strike se aplică termenilor de sprite, spray-urile sunt sinonime destul de semnificative: explozie, sânge, vedere ...

Expresia "instalează sprite css v34" pentru inițiat este destul de normală și de înțeles. Spritele au câștigat nu numai utilitatea în aplicarea în esența lor, ci au format și o nișă care a devenit pe deplin funcțională, accesibilă și ușor de înțeles pentru un anumit cerc de consumatori.

CSS sprite: un exemplu

Pentru a comuta paginile unui site într-o altă limbă, se utilizează o varietate de opțiuni, dar dacă selectorul de limbi este executat sub forma unei pictograme, soluția care utilizează sprite poate arăta astfel:

Dezavantaje evidente ale spritelor

În primul rând, este un proces consumator de timp și scrupulos. Este un lucru de a tăia un design în bucăți mici, celălalt este de a colecta o imagine de la multe mici. Aplicați ideea pânzei și puneți pe ea toate imaginile folosite pe site, complet inutile.

Chiar și folosind un generator de sprite CSS, dificultățile nu pot fi evitate, mai ales când trebuie să reproiectați design-ul site-ului. Adăugați în câteva zeci de imagini sprite - nu este o serie de elemente, grafica au grafica, de obicei este doar afișat pe ecran, în loc sortarea codul ca o matrice pentru a găsi elementul dreapta.

Standardul și dezvoltatorii care îl urmăresc susțin că, deoarece spritele sunt asociate cu fundalul regulii, atunci aceasta este o imagine exclusiv de fond, nu un element al site-ului. Componenta grafică a elementelor de pagină ar trebui să manipuleze etichetele img.

Cu aceasta este dificil să se înțeleagă pe baza simplă că fundalul nu a fost perceput ca un context general. Este doar un fundal, indiferent de ce - un element miniatural sau întreaga pagină ca întreg.

Între timp, componenta grafică reprezintă un obstacol serios în utilizarea spritelor.

Utilizare rezonabilă

În ciuda faptului că termenii "tehnologii Internet" și "tehnologii înalte" sunt, în general, considerați sinonimi, de fapt este vorba de muncă intensivă și, în unele locuri, de muncă foarte netehnologică. Sprites nu se deosebesc în mod special de alte blocaje, cum ar fi programarea pură în jаvascript sau PHP sau din punctul de vedere al dezvoltării funcționalității necesare, al stabilirii proceselor de completare a site-urilor cu informații sau, de exemplu, crearea de copii de fond ale arhivelor.

Puterea și perspectiva sistemelor de gestionare a site-urilor utilizate sunt uneori uneori cu nuanțele aplicării lor practice, iar dezvoltarea manuală a resurselor, de regulă, duce la necesitatea rescrierii unuia sau a altui algoritm propriu pentru cel de-al 1001-lea moment.

În contextul a ceea ce sa spus, este important să utilizați în limite rezonabile tot ceea ce oferă un instrument modern. Nu fi prea dornici de a folosi una peste alta, iar regula de aur în construirea site-ul are următorul: trebuie să se gândească nu despre cum să treacă de lucru cât mai curând posibil, și cum să-l execute, astfel încât, în caz de orice situație neprevăzută poate fi rezolvată rapid orice problemă.