Begrebet sprites har eksisteret i et stykke tid nu. Det er en af de mest anvendte teknikker i spilbranchen for at fremskynde processen med at vise animationer på en skærm. I denne artikel vil vi især se på, hvordan denne teknik kan hjælpe os med at forbedre brugeroplevelsen på websider ved hjælp af CSS Sprites i følgende rækkefølge:
- Hvad er en Sprite?
- Hvad er CSS Sprite - et hurtigt overblik?
- Eksempel på hvordan det hjælper med webudvikling?
- Fordele ved at bruge CSS Sprites
- Hvad skal en udvikler gøre, når han arbejder med CSS Sprites?
- Hvordan oprettes et CSS Sprite Sheet?
- Hvordan arbejder jeg med CSS Sprites?
- Virksomheder, der bruger CSS Sprites
Hvad er en Sprite?
En sprite er et enkelt billede, der er en del af en større scene i et spil. Flere sprites kombineres derefter til et stort billede kaldet et sprite ark. Når et sprite-ark er indlæst i hukommelsen, gengives forskellige sprites hurtigt efter hinanden for at give illusionen om animation. Dette gøres samtidigt for titusinder til hundreder af forskellige sprites for at generere en scene i spillet.
Grundideen er, at det er meget hurtigere at indlæse et billede og vise en del af det, hvor det er nødvendigt, sammenlignet med at indlæse flere billeder og vise dem.
Hvad er CSS Sprite: Et hurtigt overblik?
En CSS sprite er en teknik, der ofte bruges af webudviklere til at optimere websides ydeevne. I denne teknik kombineres flere mindre billeder normalt med samme dimensioner til et enkelt stort billede kaldet a sprite ark eller flise sæt . Dette sprite ark bruges derefter til at vise individuelle elementer, hvor vi har brug for dem.
Normalt er elementer som logoer, navigationspil, knapper inkluderet i sprite-arket, da de næsten har de samme dimensioner og ofte bruges på en webside.
Eksempel på hvordan det hjælper med webudvikling?
Generelt gemmes og bruges billeder, når de designer websider, som individuelle filer. Så når en bruger åbner en webside, skal browseren foretage en HTTP-anmodning for hver af disse filer, downloade dem separat og vise dem. Dette fører til højere sideindlæsningstider, da en bestemt webside kan have et stort antal mindre billeder som knapper, ikoner, logoer.
CSS sprites hjælper udviklerne med at kombinere disse ofte anvendte små billeder til et stort billede. Derefter skal browseren kun downloade en fil, som derefter bruges tilfå vist det ønskede afsnit ved at udligne billedet.
Fordele ved at bruge CSS Sprites
Der er to hovedfordele ved at bruge CSS-sprites i forhold til normale billeder:
Hurtigere sideindlæsning: Forbedrer sidens indlæsningstid, når billeder, der bruges på websiden, vises, så snart arket er downloadet.
Større kapacitet og lavere ressourceforbrug: Ikke kun denne teknik forbedrer slutbrugeroplevelsen ved at få siden til at indlæse hurtigere,men det reducerer også netværksbelastning, da der foretages et lavere antal HTTP-anmodninger.
Hvad skal en udvikler gøre, når han arbejder med CSS Sprites?
Når man arbejder med individuelle billeder, kan udvikleren simpelthen arbejde med HTML-tag og stil det i CSS, hvis det kræves. Men når man arbejder med CSS Sprites, skal en udvikler gøre to specifikke ting:
- Oprettelse af Sprite Sheet
Under udvikling af en webside, hvis udvikleren beslutter at bruge CSS-sprites, skal han / hun først oprette sprite-arket ved at flette alle de ønskede elementer som knapper, logoer osv. I et gitterlignende mønster. Dette kan gøres ved hjælp af ethvert billedredigeringsprogram som Photoshop eller Gimp. Der er også mange online-værktøjer til rådighed, der hjælper dig med at lave sprite-arket. Disse værktøjer diskuteres senere i denne artikel.
- Få adgang til et bestemt element i sprite ved hjælp af CSS baggrundsposition ejendom
Når sprite-arket er klar, skal udvikleren derefter bruge CSS-attributter for at få adgang til forskellige dele af arket.
- bredde: Sprite bredde
- højde: Sprite højde
- baggrund: Henvisning til sprite-arket
- Baggrundsposition: Forskydningsværdier (i pixels) for kun at få adgang til den krævede del af sprite-arket
Hvordan oprettes et CSS Sprite Sheet?
Du kan bruge enhver billedredigeringssoftware til at arrangere dine mindre billeder i et gitter, men to lettere metoder diskuteres nedenfor:
1. Online Sprite Sheet Creation Tool
LINK: toptal.com/developers/css/sprite-generator/
Dette værktøj er ikke kun gratis at bruge, men giver dig også den nødvendige CSS-kode, der kan bruges, mens der henvises til sprite-arket. Du kan også snakke rundt med forskellige egenskaber som polstring mellem elementerne og ændre deres justering.
2. Generering af Sprite Sheet med Sprity
Hvis du bruger Grunt, Node eller Gulp, kan du installere en pakke kaldet Sprity, som hjælper dig med at oprette et sprite-ark i en række forskellige formater som PNG, JPG osv.
For det første skal du installere Sprity ved hjælp af:
npm installer sprity -g
Brug derefter følgende kommando til at generere sprite-ark:
sprity ./output-directory/ ./input-directory/*.png
python def __init__
Hvordan arbejder jeg med CSS Sprites?
I dette eksempel bruger vi følgende sprite ark:
Som du kan se i ovenstående billede er seks ikoner (Instagram, Twitter og Facebook) arrangeret i et gitterlignende mønster. I den første række har vi en normal tilstand, og i den anden række har vi deres svævende tilstand (billedet, der vises, når vi holder musemarkøren på dem).
Hvis du lavede sprite-arket ved hjælp af de værktøjer, vi diskuterede ovenfor, kender du allerede de forskydninger, der kræves i CSS, men hvis du brugte et andet værktøj, eller hvis du simpelthen fik noget sprite-ark, så fortvivl ikke, vi vil diskutere en metode, der vil hjælpe dig med at få forskydninger for det krævede element.
Lad os nu se en meget enkel måde at få krævede forskydninger for hvert af de seks ikoner ved hjælp af MS Paint. Det er muligvis ikke en ideel løsning til at arbejde med sprites, men da den har den funktion, der giver koordinaterne til musemarkøren, kan den bruges til at få de krævede X- og Y-koordinater.
Først skal du åbne dit sprite arkbillede (gitter indeholdende alle de mindre billeder) og bringe din musemarkør i øverste venstre hjørne af sprite, som du vil gribe.
Når du har koordinaterne for det øverste venstre punkt på din sprite (øverste venstre Instagram-billede), kan du vise denne specifikke sprite, hvor det er nødvendigt, ved hjælp af CSS-koden:
baggrund: url ('img_sprites.png')
baggrundsposition: 0 0
bredde: 125px
højde: 125px
Vi bruger bredde og højde som 125 pixels, da vores ikoner har den dimension. For at hente det næste billede (Twitter) i samme række bruger vi følgende kode:
baggrund: url ('img_sprites.png')
baggrundsposition: -128px 0px
bredde: 125px
højde: 125px
Bemærk attributten for baggrundsposition i ovenstående uddrag. (-128px, 0) betyder, at vi udligner vores sprite-ark til venstre med 128 pixels (der tages højde for polstring mellem elementer) og 0 pixels på Y-aksen. Hvis vi skulle få adgang til twitter-svæveikonet, ville vores baggrundspositionsattribut være:
baggrundsposition: -128px -128px
På denne måde kan vi nu få adgang til hver komponent i vores sprite-ark ved hjælp af CSS. Lad os gennemgå en komplet HTML- og CSS-kode om, hvordan du gør det.
Trin 1: Skrivning af den krævede HTML-kode
I nedenstående kode tilføjer vi blot tre links. Vi vil også linke vores HTML med stilarket (screen.css).
Trin 2: Skrivning af den nødvendige CSS. Først vil vi style vores fælles ikonklasse. Her kan du se, at vi henviser til det sprite-ark, vi oprettede.
/ * Delt ikon Klasse * /
span.icon et link,
span.icon a: besøgte{
Skærm:blok
tekstindryk:-9999px
passere værdi i java
baggrundsbillede: url (./ img_sprites.png)
baggrund-gentagelse:nej-gentag
}
Trin 3: Få de individuelle ikoner fra sprite-arket ved hjælp af forskydningerne.
/ * Instagram-ikon * /
span.instagram et link,
span.instagram a: besøgte{
bredde:125px
højde:125px
baggrund-position:0 0
}
/ * Twitter-ikon * /
span.twitter et link,
span.twitter a: besøgte{
bredde:125px
højde:125px
baggrund-position:-128px 0
}
/ * Facebook-ikon * /
span.facebook et link,
span.facebook a: besøgte{
bredde:125px
højde:125px
baggrund-position:-257px 0
}
Trin 4: At få svæveikonerne fra sprite-arket ved hjælp af forskydningerne.
span.instagram a: svæver{baggrund-position:0 -128px}
hvordan man installerer hadoop på linux
span.twitter a: svæver{baggrund-position:-128px -128px}
span.facebook a: svæver{baggrund-position:-255px -128px}
Virksomheder, der bruger CSS Sprites
Mange store navne i branchen bruger CSS Sprites til at forbedre deres websides lydhørhed. Virksomheder som Google, Facebook, Amazon bruger i vid udstrækning denne metode, da dette hjælper dem med at reducere antallet af HTTP-anmodninger pr. Session for en bestemt bruger. Dette er en enorm fordel, når vi tager i betragtning, at disse virksomheder betjener millioner af kunder på et givet tidspunkt.
Nu hvor du har et greb om, hvad CSS-sprites er, og hvordan du arbejder med dem, er du et skridt nærmere på din rejse for at lære CSS. Begreber som sprites er en game-changer i nutidens tid, da det er blevet ekstremt vigtigt for udviklere at hente hver eneste præstation fra en webside.
Tjek vores som kommer med instruktørstyret live træning og projektoplevelse i det virkelige liv. Denne træning gør dig dygtig i færdigheder til at arbejde med back-end og front-end webteknologier. Det inkluderer træning i webudvikling, jQuery, Angular, NodeJS, ExpressJS og MongoDB.
Har du et spørgsmål til os? Nævn det i kommentarfeltet på bloggen 'HTML-billeder', og vi vender tilbage til dig.