CSS - CSS Sprites


CSS Sprites worden veel gebruikt door 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.

Afbeeldingen combineren

Een CSS Sprite is een manier om meerdere kleine afbeeldingen te combineren tot één grote afbeelding met als resultaat dat de afbeelding maar één keer ingeladen hoeft te worden. Vervolgens wordt met behulp van CSS de juiste afbeelding geplaatst op de juiste plaats door deze als achtergrond in te stellen en de bijbehorende positie te bepalen.

Als je gebruik maakt van bijvoorbeeld opties onder een artikel zoals (afdrukken, pdf, favorieten) en deze hebt voorzien van iconen dan kan het combineren van deze iconen tot een enkele afbeelding de snelheid bevorderen en bandbreedte besparen, een ander voorbeeld is het plaatsen social media iconen en de bijbehorende mouse-overs.

Google

Google werd al even aangehaald en de zoekmachine maakt onder andere gebruik van deze techniek voor de pagina met zoekresultaten, een voorbeeld van zie je hieronder staan. Je ziet in de afbeelding dat de diverse iconen die je normaal bij de zoekresultaten ziet staan op verschillende plekken eigenlijk dus komen uit een enkele afbeelding.

CSS Sprites

Toepassen

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

CSS Sprites

Je gaat dan de iconen maken met CSS, in dit geval zijn dat drie links die ieder voorzien zijn van een eigen classnaam. De HTML code voor de betreffende links wordt dan als volgt.

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


Dan ga je de CSS hiervoor instellen, de iconen zijn 16 pixels breed dus kunnen de verschillende classnamen gecombineerd worden zodat je niet per icoon de breedte en hoogte aan hoeft te geven. Heb je afwijkende formaten is dit uiteraard wel noodzakelijk. Je stelt dan net als normaal de hoogte, breedte en de achtergrond in zoals hieronder.

a.print,
a.pdf,
a.email {
        display:block;
        width:16px;
        height:16px;
        background-image:url(iconen.gif);
        background-repeat:no-repeat;
}


Vervolgens moet voor elke link de juiste afbeelding worden getoond door deze op de juiste manier te positioneren. Hieronder zie je nu de drie verschillende links maar deze hebben allen nog dezelfde achtergrond zoals ook aangegeven is in de bovenstaande CSS.

Je stelt dan vervolgens de positie van de achtergrond in per link, het instellen gaat met negatieve waardes omdat de afbeelding eigenlijk naar links verplaatst moet worden.

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


Samenvattend

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 bijvoorbeeld een menu met mouse-over en een selected state. De volledige CSS code zie je hieronder.

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;
}