CSS-sprites: en beskrivning av de grundläggande teknikerna och användbara tips

Modern plats att vara snabb, trevlig och effektivt både på utvecklingsstadiet, och när man arbetar med en klient. Som regel, varje företag som skapar online-resurser, syftar till att ha sin egen ansikte, för att locka besökare med sin design, stil, tillförlitlighet, hastighet och andra attribut.

Användbara egenskaper sprites

CSS-sprites kan förbättra både kvalitativa egenskaper på webbplatsen och företagets image. I grunden är det inte alltför komplicerat utvecklingsverktyg, men det verkligen snabbar upp processen och resursutveckling, och hastigheten på sitt arbete.

Bland annat förenklas koden och, i viss mening, är det portabel till andra resurser att på grund av det faktum att de använda CSS-sprites är lika som de nära släktingar, eftersom du kan använda dialogen samma grafiska idéer, stil designelement, struktur och innehållet i taggen.

Under normala utvecklingen av platsen för att göra en hel del bilder. Mycket ofta dessa bilder tar upp väldigt lite utrymme, men är alltid en separat fil. För alla operativsystem någon server öppna en fil - denna operation, en tidskrävande, men kommer inte att skilja sig avsevärt med avseende på tiden när en fil öppnas på 13 av 13 pixlar, och när filen öppnas från 16 bilder 52 av 52 pixlar. I det första fallet har du 16 filer och 16 öppna / läsoperationer, i det andra fallet 16 bilder kommer att erhållas som ett resultat av öppnandet av en enda fil.

Om du skapar en uppsättning filer i ämnet (horisontell meny, dialogformer, räknaren knappar kalenderdesignelement ...) att sådana bilder kan kombineras på ett flexibelt sätt flyttas från plats till plats.

nackdelen

När det finns fläktar, för ystra rekommenderas att använda CSS sprites nödvändigtvis de som noggrant studera frågan och visar tydligt att det alltid är praktiskt att arbeta på gammaldags sätt.

Faktum är att om det finns en fil av 16 bilder, i stället för 16 öppna / läsoperationer kommer att vara en i stället för 16 bildfiler. Men tricket är att alla webbläsare har en cache, och den laddar något endast som en sista utväg. Dessutom är oftast sidelement laddas när du först besöker sidan och sedan lastas endast förändrats.

En annan aspekt. Normalt är bilden skärs inte limmat till en enda fil. På något sätt har det utvecklat en teknik, är det bättre att säga, den anpassade. Designern skapar layouten och layout använder sina pjäser: fint skivad bitar av layouten. Motståndare sprites tror att plocka upp flera bilder i en fil - krävande verksamhet, vilket ökar den totala layout.

Det finns de utvecklare som tror och optimera antalet HTTP-förfrågningar, i tron att denna ockupation är mer pragmatisk än CSS-sprites.

Alla tider som anges är utan tvekan viktigt, men mycket viktigare är utsikten: det bör tillämpas inom rimliga gränser.

Automation och CSS-Sprites

Om det är meningslöst att köra CSS Sprites generator och få den högra delen av designen, sedan ingenting hindrar helt enkelt upp denna del av den normala vägen. Om konventionell teknik gör det nödvändigt att skära hundratals bilder, är det att föredra att skissa JavaScript-funktion, som med nödvändighet kommer att välja från det önskade området av sprite och visa den.

Det bör dock noteras att spriten av två eller tre delar, eller en annan dussin - okej, men när i sprite hundratals teckningar, några med att skriva JavaScript funktionsproblem, naturligtvis, inte kommer att inträffa, men hur mycket arbete det tar att skapa en så stor sprite ... Dessutom lim bilder - detta en CSS sprite generator och gör den önskade bilden och CSS-koden för det, han inte bryr sig om hur mycket kommer beståndsdelarna i spriten. Problem uppstår när omarbeta webbdesign förändring, borttagning och tillägg av nya element. Utveckla en sprite, bör du tänka inte om hur man använder det och hur det sedan ändra.

Angående fördel med att använda sprites

Till skillnad från CSS programmeringsspråk, är detta en relativt statisk uppsättning regler alla dess dynamik bestäms av reglerna och deras funktionella innehåll (standard). Med tanke på sprites i komplexet, HTML, CSS kan skapa ett tema-funktionell design av biblioteket.

Till exempel den färdiga versionen av menyn: bara att ansluta flera css-regler, JS-funktioner och omfattar kodnumret HTML-Divar kan du få resultatet. Genom att ändra innehållet i bilden av spriten, kan du ändra utseendet på menyn. Ange kroppen av funktionen kan du justera funktionaliteten.

Få en märklig variant av objektorienterad programmering (OOP). Visst skulle det vara en ljus idé, men det kommer inte att vara för ljust för att sticka ut mot bakgrund av andra OOP språk dialekter verklig. Det är bara i början av 90-talet, när PLO återupplivades och blev ovanligt snabbt få en plats i solen, det är en specifik idé och en konkret form av dess uttryck, men nu utvecklarna har kommit med så många dialekter som det har varierande ryska.

Leksaker - en guldgruva för sprites

Spänning och programmering - oförenliga begrepp, men programmeringskunskaper, skriva spel, skiljer sig markant från obschebytovoy (enkel kryptering) och kreativ (design och utveckling av ny teknik, idéer).

Speldesign talar vektorgrafik, eftersom kombinationen av SVG-sprites + CSS-reglerna inte bara efterfrågan, men ofta blir föremål för utvecklaren (av webbplatsen) till föremål för ett riktigt spel. I synnerhet det populära spelet Counter Strike gäller villkoren för sprites, sprayer ganska menings Synonymer: blast, blod, synen ...

Frasen "sätta sprite css V34" för den initierade är helt normalt och förståeligt. Älvor finns inte bara i användningen av verktyget, i huvudsak, men också bildat en nisch, vilket är ganska komplett, prisvärd och enkel att förstå en viss krets av konsumenter.

CSS-sprites: Exempel

en mängd olika alternativ för ett visst språk för att växla sidor på webbplatsen används, men om språkvalet att fungera som en ikon, kan lösningen med en sprite se ut så här:

Uppenbara nackdelar sprites

Först och främst är det tidskrävande och noggrann process. Det är en sak - att skära designen i små bitar, och den andra - för att samla in en bild av många små. Applicera tanken på duken och placera den på alla bilder som används på webbplatsen är helt meningslöst.

Även med hjälp CSS sprites Generator, inte kan undvikas svårigheter, särskilt när det är nödvändigt att ändra webbdesign. Lägg i några tiotals sprite bilder - det är inte en rad faktorer, grafiken har grafik, är det oftast bara visas på skärmen, i stället för att reda ut koden som en matris för att hitta rätt objekt.

Standard och utvecklare efter hans påstående att som sprites i samband med en policy bakgrund används är det bara en bakgrundsbild och inte platsen elementet. Grafiska beståndsdelarna i en sida ska manipulera tag img.

Det är svårt att komma överens om de enkla grunderna att när tillräckligt bakgrunden uppfattades som en gemensam bakgrund. Det är bara i bakgrunden, oavsett vad - en miniatyr element eller hela sidan.

Samtidigt grafiska komponenten utgjorde ett allvarligt hinder för användningen av sprites.

förnuftig användning

Trots att termerna "Internet teknik" och "högteknologiska" anses vara synonyma, i själva verket är det tidskrävande och ibland mycket låg-tech arbete. Sprites är inte särskilt klädd jämfört med andra flaskhalsar i ren programmering i JavaScript eller PHP, liksom i utvecklingen av den nödvändiga funktioner, inställning processer för att fylla platser eller information, såsom bakgrunden skapar arkivexemplar.

Kraft och utsikterna för användning av content management system ofta planat nyanserna i deras praktiska tillämpning och utveckling manuell resurs som regel leder till behovet av 1001:e tid att skriva en eller den andra en algoritm.

I detta sammanhang är det viktigt att bara rimligt att använda allt som ger ett modernt verktyg. Var inte för ivrig att använda en över den andra, och den gyllene regeln på plats byggnad har följande lydelse: du behöver tänka inte om hur att passera arbete så snart som möjligt, och hur man utför det så att i händelse av oförutsedd situation kan lösas snabbt några problem.