CSS sprites: beskrivning, grundläggande tekniker och användbara rekommendationer

En modern webbplats bör vara snabb, vacker ocheffektiv både i utvecklingsstadiet och när man arbetar med en klient. Som regel strävar varje företag som skapar internetresurser att ha sitt eget ansikte, att locka besökare med sin design, stil, pålitlighet, snabbhet och andra kvaliteter.

Användbara egenskaper hos sprites

CSS-sprites kan förbättras som hög kvalitetwebbplatsfunktioner och företagets image. I kärnan är detta inte ett särskilt komplicerat utvecklingsverktyg, men det påskyndar verkligen processen att utveckla resurser och hastigheten på deras arbete.

Dessutom förenklar koden och, ii en viss mening blir det bärbart till andra resurser, som, på grund av att CSS-sprites används, blir liknande som nära släktingar, eftersom du kan använda samma grafiska idéer, utformningen av dialogelementens utformning, taggarnas struktur och innehåll.

I den normala webbplatsutvecklingsprocessen måste du göra detgöra många bilder. Mycket ofta tar dessa bilder mycket lite utrymme, men är alltid en separat fil. För alla operativsystem på vilken server som helst är det en tidskrävande operation att öppna en fil, men den kommer inte att skilja sig betydligt i tiden när en fil öppnas med 13 x 13 pixlar och när en fil med 16 bilder öppnas, 52 med 52 pixlar. I det första fallet är det nödvändigt att ha 16 filer och 16 öppna / läsoperationer, i det andra fallet kommer 16 bilder att erhållas som ett resultat av att endast en fil öppnas.

Om du skapar uppsättningar av sådana filer efter ämne(horisontell meny, dialogformulär, räknareknappar, element för kalenderdesign ...) då kan sådana uppsättningar av bilder överföras mobilt från plats till plats.

Myntens baksida

När det finns fans som är för snabba att rekommendera att använda CSS-spriter, se till att hitta dem som noggrant studerar frågan och tydligt visar att det alltid är mer praktiskt att arbeta på gammaldags sätt.

Faktum är att om istället för 16 bildfilerOm det finns en fil med 16 bilder, kommer istället för 16 öppna / läsoperationer att finnas en. Men tricket är att varje webbläsare har en cache, och den laddar bara något som en sista utväg. Dessutom laddas vanligtvis sidelement vid det första besöket på sidan och endast modifierade laddas därefter.

En annan aspekt. Vanligtvis klipps bilder, inte limmade i en enda fil. På något sätt har tekniken utvecklats, utan snarare anpassad. Designern skapar layouten, och layouten använder sina delar: finhackade delar av layouten. Motståndare mot sprites tror att samla flera bilder i en fil är en mödosam uppgift som ökar den totala utvecklingstiden för en sida.

Det finns också utvecklare som överväger och optimerar antalet HTTP-förfrågningar och tror att den här aktiviteten är mer pragmatisk än CSS-spriter.

Alla de angivna punkterna är tveklöst viktiga, men yttrandet är mycket viktigare: allt bör tillämpas inom rimliga gränser.

Automation och CSS Sprites

Om det inte är vettigt att köra CSS-sprite-generatoroch för att få rätt del av designen hindrar ingenting bara att kompensera för den här delen på vanligt sätt. Om konventionell teknik leder till behovet av att klippa hundratals bilder är det att föredra att beskriva en javascript-funktion som kommer att välja önskat område från spriten och visa den vid behov.

Det bör dock noteras att spriten fråntvå eller tre element eller ett dussin eller två - vart det än går, men när det finns hundra ritningar i spriten, så kommer det naturligtvis inte att vara några problem med att skriva en javascript-funktion, men hur mycket arbete det kommer att ta för att skapa en så stor sprite ... Dessutom limning av bilder är en sak, CSS-sprite-generatorn gör både den önskade bilden och CSS-koden för den, det bryr sig inte hur många spriteelement som kommer att finnas. Problem kommer att uppstå vid omarbetning av webbplatsen, ändring av design, radering och tillägg av nya element. När man utvecklar en sprite bör man inte tänka på hur man använder den, utan om hur man ändrar den senare.

Tematiska fördelar med att använda spriter

Till skillnad från CSS-programmeringsspråk, dettaen relativt statisk uppsättning regler, all dess dynamik bestäms av reglerna och deras funktionella innehåll (enligt standarden). Med tanke på komplexa sprites, HTML, CSS, kan du skapa tematiska bibliotek med designfunktionalitet.

Till exempel det färdiga menyalternativet: genom att bara ansluta några css-regler, js-funktioner och inklusive några HTML-divs i koden kan du få resultatet. Genom att ändra innehållet i sprite-bilden kan du ändra utseendet på den här menyn. Genom att ange funktionens kropp kan du justera funktionen.

Få ett speciellt alternativobjektorienterad programmering (OOP). Visst, detta kommer att vara en ljus idé, men den kommer inte att stå ut för ljust mot andra OOP-dialekter på riktiga språk. Det var först i början av 90-talet, när PLO återupplivades och började snabbt få en plats i solen, det representerade en konkret idé och en konkret form för sitt uttryck, och idag har utvecklare kommit med så många dialekter som det inte finns något olika ryska språk.

Leksaker - en bonanza för spriter

Spänning och programmering är oförenliga koncept,men kvalifikationerna för en programmerare som skriver spel skiljer sig markant från det allmänna hushållet (enkel kodning) och kreativ (design och utveckling av ny teknik, idéer).

Speldesign tilltalar vektorgrafik eftersomkombinationen av SVG-sprites + CSS-regler är inte bara efterfrågad, utan förvandlas också ofta från ett objekt från en utvecklare (webbplats) till ett objekt för ett riktigt spel. Speciellt tillämpar det populära Counter Strike-spelet spriter, sprayer, helt meningsfulla synonymer: explosion, blod, syn ...

Frasen "installera css v34 sprites" förden initierade är helt normal och förståelig. Sprites fick inte bara användbarhet i sitt väsen, utan bildade också en nisch som blev fullt funktionell, tillgänglig och förståelig för en viss konsumentkrets.

CSS-sprites: ett exempel

En mängd olika alternativ används för att växla webbplatssidorna till ett visst språk, men om språkväljaren körs som en ikon, kan en lösning med en sprite se ut så här:

Uppenbara nackdelar med spriter

Först och främst är det mödosamt och noggrantprocess. Det är en sak att skära designen i små bitar, en annan att sätta ihop en bild från många små. Att använda idén om en duk och placera på den är alla bilder som används på webbplatsen helt meningslösa.

Även med CSS-sprite-generator, svårigheterkan inte undvikas, särskilt när du måste göra om utformningen av webbplatsen. Att placera dussintals bilder i en sprite är inte en rad element, grafik har grafik, de visas vanligtvis helt enkelt på skärmen och sorteras inte i koden som en matris på jakt efter det önskade elementet.

Standarden och utvecklarna som följer den hävdarEftersom sprites är associerade med bakgrundsregeln är detta en exklusiv bakgrundsbild, inte ett webbplatselement. Den grafiska komponenten i sidelement ska manipulera img-taggar.

Det är svårt att komma överens med detta på den enkla grunden att bakgrund knappast någonsin uppfattades som en allmän bakgrund. Detta är bara bakgrunden, oavsett vad - ett miniatyrelement eller hela sidan som helhet.

Samtidigt är det den grafiska komponenten som verkar vara ett allvarligt hinder för användningen av spriter.

Smart användning

Även om termerna "internetteknologi"och "högteknologi" anses vara synonymt, i själva verket är det tidskrävande och ibland mycket lågteknologiskt arbete. Sprites skiljer sig inte särskilt från andra flaskhalsar både i ren javascript eller PHP-programmering, och när det gäller att utveckla den nödvändiga funktionaliteten, ställa in processer för att fylla webbplatser med information, eller till exempel skapa arkivkopior i bakgrunden.

Kraften och löften för de system som användswebbplatshantering är ibland utjämnad av nyanserna i deras praktiska tillämpning, och manuell utveckling av resurser leder som regel till behovet av att skriva om en eller annan egen algoritm för 1001: e gången.

I samband med det ovanstående är det viktigt helt enkelt på ett rimligt sättanvända allt som ett modernt verktyg ger. Man bör inte vara för ivriga att använda den ena till nackdel för den andra, och den gyllene regeln i tomtbyggnad lyder på följande sätt: du behöver inte tänka på hur du ska lämna in arbetet så snart som möjligt, men om hur du ska utföra det så att i fall av en oförutsedd situation kan du snabbt lösa något problem.