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

En modern webbplats ska vara snabb, vacker ocheffektiv både på utvecklingsstadiet och när man arbetar med kunden. Som regel strävar varje företag som skapar Internetresurser till att ha sin egen person, locka besökare genom sin design, stil, tillförlitlighet, hastighet och andra egenskaper.

Användbara egenskaper hos sprites

CSS sprites gör att du kan förbättra både kvalitetegenskaperna hos webbplatsen och bild av företaget. I huvudsak är detta inte ett mycket komplext utvecklingsverktyg, men det påskyndar verkligen processen med resursutveckling och arbetets hastighet.

Koden förenas bland annat och ii viss mening blir bärbar till andra resurser, som tack vare användandet av CSS sprites blir liknar närmsta släktingar, eftersom du kan använda samma grafiska idéer, utformningen av dialogelementens konstruktion, strukturen och innehållet i taggarna.

I den normala processen med webbutveckling behöver duatt göra många bilder. Mycket ofta tar dessa bilder upp mycket lite utrymme, men de är alltid en separat fil. För vilket operativsystem som helst på en server är det en operation som tar mycket tid att öppna en fil, men det skiljer sig inte signifikant i tiden då en fil öppnas med 13 med 13 bildpunkter och när en fil med 16 bilder 52 med 52 bildpunkter öppnas. I det första fallet måste du ha 16 filer och 16 öppna / läsa operationer, i det andra fallet kommer 16 bilder att erhållas genom att bara öppna en fil.

Om du skapar uppsättningar av sådana filer efter ämne(den horisontella menyn, dialogformulär, kalkylatorknappar, kalenderdesignelement ...) kan sådana bildsätt överföras från webbplatsen till webbplatsen.

Myntens baksida

När det finns fans som är för snabba att rekommendera med CSS sprites, var noga med att hitta dem som noggrant studerar frågan och intelligent visar att det alltid är praktiskt att arbeta på det gammaldags sättet.

Faktum är att om istället för 16 bildfilerDet kommer att finnas en fil från 16 bilder, istället för 16 öppna / läsa operationer kommer det att finnas en. Men tricket är att varje webbläsare har en cache, och det laddar bara något som en sista utväg. Dessutom laddas sidelementen vanligen vid det första besöket på sidan, och endast ändrade sidor laddas därefter.

En annan aspekt. Vanligtvis skärs bilderna och lims inte in i en fil. På något sätt har tekniken utvecklats och, bättre att säga, anpassad. Designern skapar layouten, och layouten använder sina delar: finklippta delar av layouten. Motståndare till sprites tror att samla flera bilder i en fil är en mödosam uppgift, vilket ökar den totala tiden för sidutveckling.

Det finns några utvecklare som överväger och optimerar antalet HTTP-förfrågningar, och tror att detta yrke är mer pragmatiskt än CSS sprites.

Alla dessa punkter är utan tvekan angelägna, men yttrandet är mycket viktigare: allt måste tillämpas inom rimliga gränser.

Automatisering och CSS Sprites

Om det inte är meningslöst att köra CSS-sprite-generatornoch få den rätta delen av designen, förhindrar ingenting att bara göra upp den här delen på vanligt sätt. Om den vanliga tekniken leder till behovet av att klippa hundratals bilder, är det bättre att skissa en JavaScript-funktion, som vid behov kommer att välja önskat område från spritet och visa det.

Det bör dock noteras att spritet frånTvå eller tre element eller ett dussin eller två - okej men när det finns hundratals teckningar i sprite så kommer det naturligtvis inga problem med att skriva JavaScript-funktionen, men hur mycket arbete kommer att spenderas på att skapa en så stor sprite ... Också, att limma bilder är en sak, CSS-sprite-generatorn gör både den önskade bilden och CSS-koden för den, det spelar ingen roll hur många beståndsdelar i spritet det är. Det kommer att uppstå problem när du redesignar webbplatsen, ändrar designen, tar bort och lägger till nya element. När du utvecklar en sprite bör du inte tänka på hur man använder den, men hur man ändrar den senare.

Tematiska fördelar med användning av sprites

Till skillnad från CSS programmeringsspråk, dettaen relativt statisk uppsättning regler, hela 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 av designfunktionella.

Till exempel, det färdiga menyalternativet: helt enkelt genom att ansluta flera css-regler, js-funktioner och inklusive flera HTML-div i koden kan du få resultatet. Genom att ändra innehållet i spritbilden kan du ändra utseendet på den här menyn. Genom att ange funktionens kropp kan du justera funktionaliteten.

Få ett slags alternativobjektorienterad programmering (OOP). Utan tvekan kommer det att bli en ljus idé, men det kommer inte att stå ut för starkt mot andra OOP-dialekter på riktiga språk. Det var först i början av 90-talet, när PLO återupplivades och det blev ovanligt snabbt för att erövra platsen under solen, det var en konkret idé och en specifik form av sitt uttryck och idag har utvecklarna kommit med så många dialekter som det inte finns något mångsidigt ryskt språk.

Leksaker - den gyllene botten för sprites

Spänning och programmering är oförenliga begreppmen kvalificeringen av en programmerare som skriver spel skiljer sig märkbart från allmänhetens vardagliga (enkla kodning) och kreativa (design och utveckling av ny teknik, idéer).

Speldesign appellerar till vektorgrafik eftersomkombinationen av SVG sprites + CSS regler är inte bara hävdad, men växlar ofta från en utvecklares (plats) objekt till ett riktigt spelobjekt. I synnerhet gäller det populära spelet Counter Strike sprites till termer, sprayar ganska meningsfulla synonymer: explosion, blod, syn ...

Uttrycket "installera css v34 sprites" förinitiera är ganska normalt och förståeligt. Sprites har funnit inte bara användbarhet i sin ansökan utan bildade också en nisch som har blivit fullt fungerande, tillgänglig och förståelig för en viss konsumentkrets.

CSS Sprites: Ett exempel

Om du vill byta sidor på ett visst språk används en rad olika alternativ, men om språkväljaren exekveras som en ikon kan lösningen med hjälp av spritet se ut så här:

Tydliga brister i sprites

Först och främst är det mödosam och noggrannprocessen. Det är en sak att skära designen i små bitar, och en annan för att samla en bild från en mängd små. Applicera tanken på duken och lägg på alla bilder som används på webbplatsen, det är helt obekvämt.

Även med CSS-sprite-generatorn, svårigheterkan inte undvikas, särskilt när du måste göra om webbplatsens design. Placering av flera dussintals bilder i sprite är inte en uppsättning element, grafik är grafik, de visas vanligen bara på skärmen och inte sökt i koden som en matris på jakt efter det önskade elementet.

Standarden och följande utvecklare hävdarEftersom sprites är relaterade till bakgrundsregeln, är det bara en bakgrundsbild, inte ett sidelement. Den grafiska komponenten av sidelementen ska hantera img-taggar.

Det är svårt att komma överens med detta på så enkelt sätt att bakgrunden var liten uppfattad som en allmän bakgrund. Det är bara en bakgrund, oavsett vad - ett miniatyrelement eller hela sidan som helhet.

Under tiden är det den grafiska komponenten som representerar ett allvarligt hinder i användningen av sprites.

Rimlig användning

Även om termerna "Internet-teknik"och "högteknologi" anses vara synonymt, det är faktiskt tidskrävande och på vissa ställen mycket lågteknologiskt arbete. Sprites skiljer sig inte särskilt från andra flaskhalsar, både i ren programmering i JavaScript eller PHP, och när det gäller att utveckla den nödvändiga funktionaliteten, ställa in processen att fylla på webbplatser med information, eller till exempel skapa bakgrundskopior.

Kraft och perspektiv av de använda systemenWebbplatshanteringen avviker ibland av nyanserna av deras praktiska tillämpning, och manuell utveckling av resurser leder i regel till att man behöver skriva om en eller annan av sin egen algoritm 1001 gånger.

I samband med ovanstående är det viktigt att bara rimligtgränser för att använda allt som ett modernt verktyg ger. Var inte för ivriga att tillämpa en till nackdel för den andra, och den gyllene regeln i byggnaden säger följande: du behöver inte tänka på hur man överlämnar jobbet så snart som möjligt, men hur man utför det så att du i händelse av en oförutsedd situation snabbt kan lösa något problem.

</ p>>