CSS Sprites – Hvad er det? Og hvordan benytter jeg dem?

Forleden skrev jeg et blogindlæg omkring mine egne erfaringer i brugen af CSS Sprites, hvor store del af disse erfaringer stammer fra dette website.

På stor opfordring for henholdsvis Martin Nielsen og Niels Gamborg kommer her en “mindre” opfølgning, der fortæller dig lidt om, hvad CSS Sprites i det hele taget er for noget, men også hvordan, du kan benytte dem – rent teknisk.

Indholdsfortegnelse

1. Kort om CSS Sprites
2. Hvordan benytter jeg CSS Sprites
3. Har du spørgsmål?
4. Gode ressourcer
5. Andre om CSS Sprites

1. Kort om CSS Sprites

Navnet i sig selv kan måske godt være lidt forvirrende, fordi det i sig selv ikke rigtigt danner et visuelt billede af, hvad CSS Sprites er for en størrelse. Nogle tænker måske på små billeder, men faktisk er det komplet modsat – som sådan.

CSS Sprites er en samling af billeder i et større billede, hvor man efterfølgende benytter sig af muligheden for at positionere baggrundsbillederne ved hjælp af CSS. Dette er jo faktisk slet ikke så tosset endda, da mange små billeder kræver mange kald til serveren, og samtidig kan gøre loadtiden langsomme på et pågældende website. Mange kender det jo nok, når de skal kopierer mange småfiler til en enhed til en anden – sjældent nogen hurtig process. Hvorimod det somregel er en mere nem process, når man flytter store filer.

Og for god service skyld, så viser jeg dig her alle de CSS Sprites, jeg selv har stykket sammen, så slipper du for at hoppe frem og  tilbage

• Sprite for alle enkeltstående grafikelementer i GIF
• Sprite for alle grafikelementer til gentagelse langs x-aksen i GIF
• Sprite for sociale ikoner i GIF
• Sprite for “følg mig på twitter” og “Bliv ajour med RSS” i GIF
• Sprite for alle enkeltstående grafikelementer i PNG
• Sprite for alle grafikelementer til gentagelse langs x-aksen i PNG
• Sprite for alle grafikelementer til gentagelse langs y-aksen i PNG

2. Hvordan benytter jeg CSS Sprites?

I stedet for al den snik snak, så synes jeg vi skal hoppe i med begge ben, og derfor kigge nærmere på, hvordan du egentlig benytter disse. Her tager jeg udgangspunkt i et af de nyeste CSS Sprites, jeg har stykket sammen. Rundt på min hjemmeside vil du støde på nogle iøjenfaldende knapper, hvilke jeg for nyligt har valgt at opdatere. Disse knapper består i al enkelthed af forskellige faser, der bliver aktiveret, når brugeren fører musen over knappen, og når brugeren klikker på knappen. Kig nedenfor:

Som du kan se ud af billedet ovenfor, fremgår 3 forskellige knapper, der hver især har 3 stadiger.

• Et stadige for inaktiv
• Et stadige for hover
• et stadige for focus

Det er vigtigt, at brugeren får en rigtig fornemmelse af, at det rent faktisk er en knap, de kan klikke på og benytte. Men al den snak om brugervenlighed og webdesign, kommer i opfølgerenden til blogindlægget omkring, hvordan du bliver en bedre webdesigner.

Førhen ville man måske definere “3 forskellige knapper”, der hver blev især blev placeret på hver sin defination i CSS. Måden ses alligevel ofte anvendt – kender i ikke det, når i fører musen over et element på en pågældende hjemmeside, og der lige går et par sekunder før, at elementet rent faktisk ændrer sig? Heldigvis ikke groft udbredt, men ser det alligevel jævnligt, desværre. Lad os derimod kigge på vores 3 forskellige definationer i CSS og HTML, der hver især skal håndtere knappens 3 stadiger. Lig iøvrigt mærke til, at jeg benytter mig af mine retningslinier fordelt på 2 blogindlæg omkring CSS og HTML

CSS

a.button {
background: url(../images/bg_buttons.jpg) no-repeat 0 0;
display: block;
height: 50px;
text-indent: -9999em;
width: 325px;
}

a.button:hover {
background: url(../images/bg_buttons.jpg) no-repeat 0 -50px;
}

a.button:focus {
background: url(../images/bg_buttons.jpg) no-repeat 0 -100px;
}

HTML

<a href="#comments" title="Afgiv en kommentar" class="button">Afgiv en kommentar</a>

Du undrer dig måske over, hvordan jeg kommer frem til de tal, der positionerer de forskellige faser? Her har jeg heldigvis været dig behjælpelig og lavet en mindre illustration, der viser dig, hvordan jeg er nået frem til disse tal.

Så enkelt kan det rent faktisk gøres. Brugeren får en god oplevelse med din knap, og du har sparet serveren for en række unødige kald. Derimod lad os se bort fra, at jeg måske skulle have valgt at benytte mig af <button> frem for <a> – Det er lidt af en smagssag, når jeg læser om det på det store internet. Rent semantisk, så burde du måske nok benytte dig af <button>, da du jo rent faktisk har med en knap at gøre, men lad os gemme den snak til en anden god gang.

Derudover handler det om, at du får bygget en god PSD-fil op, som du fremover nemt og smertefrit kan udvide eller redigere i. Nedenfor kan du se et lille skærmdump af, hvordan mine layers og groups er opsat for ovenstående knapper. Det er ingen skam i livet at være en smule struktureret. Tro mig, det lille forarbejde, vil du elsker i fremtiden

3. Har du spørgsmål?

En konklusion er vidst ikke nødvendig i det her tilfælde, men skulle der været opstået spørgsmål i forbindelse med min lille gennemgang, så skal du ikke holde dem tilbage. Hellere stil et spørgsmål for meget end et for lidt (ja, lidt kliché skal man jo være). Uanset hvad, så er der øvrig hjælp at hente nedenfor.

Jeg vil super gerne stille et spørgsmål, smid mig direkte til kommentarfeltet

4. Gode ressourcer

For at spare dig lidt tid, så har du nedenfor nøjagtig de samme gode ressourcer tilgængelig, som du også så i foregående blogindlæg omkring CSS Sprites.

• CSS Sprite Generator (uafprøvet service)
• CSS Sprites (anden uafprøvet service)
• SpriteMe (Endnu en uafprøvet service)
• Creating easy and useful CSS Sprites
• Arnau March – CSS sprite generator

5. Andre omkring CSS Sprites

Og for at spare dig endnu mere tid, så har du nedenfor også de artikler/blogindlæg, der var tilgængelige i foregående blogindlæg.

• The Mystery Of CSS Sprites (God artikkel fra Smashing Magazine)
• To Sprite Or Not To Sprite (Vladimir Vukićević om CSS Sprites)
• CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
• CSS Sprites: Image Slicing’s Kiss of Death (A Lista Part omkring emnet tilbage i 2004)
• CSS Sprites: Useful Technique, or Potential Nuisance?
• CSS Sprites – What, Why, How and When?
• Nettuts – Exactly How to Use CSS Sprites
• Aaron Barker – Diagonal CSS Sprites
• Smashing Magazine, Transparent CSS Sprites
• WDL: CSS Sprite Tips and Techniques