CSS - CSS Sprites


CSS Sprites worden veel gebruikt bij de grotere websites om zodoende de snelheid te bevorderen en bandbreedte te besparen. Het beste voorbeeld is misschien wel Google. De zoekmachine wordt dagelijks over de gehele wereld miljoenen keren opgevraagd en dan is het zeker meegenomen om, waar mogelijk de nodige bandbreedte te besparen. Een Sprite is een manier om afbeeldingen te combineren tot een grote afbeelding zodat deze maar een keer ingeladen hoeft te worden. Vervolgens wordt met CSS de juiste afbeelding bepaald door deze als achtergrond in te stellen en de positie te bepalen.

Als je gebruik maakt van een hoofdmenu met een normale staat, een geselecteerde staat etc. of bijvoorbeeld als je meerdere artikel opties (afdrukken, pdf, favorieten) hebt voorzien van iconen dan kan het combineren van deze iconen tot 1 afbeeldingen de snelheid bevorderen, bandbreedte besparen etc. Google werd al even aangehaald en de zoekmachine maakt onder andere gebruik van een sprite voor de zoekresultaten, een voorbeeld daarvan hieronder. Je ziet in de afbeelding dat de diverse iconen die je normaal bij de zoekresultaten ziet op verschillende plekken eigenlijk dus maar 1 afbeelding is.

CSS Sprites

Een dergelijke afbeelding maak je dan met bijvoorbeeld Photoshop of Paint Shop Pro en vervolgens ga ja met behulp van CSS de afbeelding goed plaatsen. Een voorbeeld, stel je hebt een drietal opties: printen, pdf en e-mail. Je combineert dan deze drie iconen tot 1 afbeelding zoals hieronder. De iconen zijn ieder 16px en totaal is dat dus 48px.

CSS Sprites

Je gaat dan de iconen instellen, in dit geval zijn dat links die voorzien zijn van een eigen ID. In dit geval is er gekozen voor een ID omdat de iconen per stuk maar een keer op een pagina voorkomen, kies anders classnamen. De HTML code voor de iconen wordt dan als volgt, in het voorbeeld zijn geen links opgenomen.

<a href="/" id="print"></a>
<a href="/" id="pdf"></a>
<a href="/" id="email"></a>


Dan ga je de CSS hiervoor instellen, de iconen zijn alle drie 16px breed dus kunnen de verschillende ID's gecombineerd worden zodat je niet per icoon de breedte en hoogte aan hoeft te geven. Heb je afwijkende formaten is dit wel noodzakelijk. Je stelt dan net als normaal de hoogte, breedte en de achtergrondafbeelding in.

<style type="text/css">
a#print,
a#pdf,
a#email {
display:block;
width:16px;
height:16px;
background-image:url(iconen.gif);
background-repeat:no-repeat;
}
</style>


Vervolgens moet de afbeelding per link goed gepositioneerd worden. Zoals hieronder zie je nu de drie verschillende links maar deze hebben allen dezelfde achtergrond. Je stelt dan de positie van de achtergrond in per element zoals hieronder. Dit stel je negatief in omdat de afbeelding naar links verplaatst moet worden.


a#print {
background-position:0px 0px;
}
a#pdf {
background-position:-16px 0px;
}
a#email {
background-position:-32px 0px;
}



Hierboven zie je de drie verschillende links die allen gebruik maken van dezelfde afbeelding. Een dergelijke opzet kan dus heel goed gebruikt worden in situaties waar veel kleine iconen worden gebruikt of gebruik wordt gemaakt van een menu met mouse-over en een selected state. De volledige CSS code is dan als volgt:

<style type="text/css">
a#print,
a#pdf,
a#email {
display:block;
width:16px;
height:16px;
background-image:url(iconen.gif);
background-repeat:no-repeat;
}
a#print {
background-position:0px 0px;
}
a#pdf {
background-position:-16px 0px;
}
a#email {
background-position:-32px 0px;
}
</style>


Delen: