Werken met CSS sprites

gepost op Woensdag 07 april 2010 door Pieter

Wat zijn CSS sprites ?

CSS sprites zijn meerdere achtergrondafbeeldingen die herleid worden tot 1 grote afbeelding. Daarna wordt met behulp van de css-eigenschap "background-position" de juiste afbeelding weergegeven op basis van de x en y coördinaten van de achtergrondafbeelding.

Enkele voordelen...

• Het grootste voordeel is het verschil in laadtijd voor uw website. Doordat allerlei kleine afbeeldingen tot 1 afbeelding herleid zijn, worden er minder http-requests gemaakt worden, wat leidt tot een snellere laadtijd van uw site.
• Je hoeft maar één afbeelding te onderhouden in plaats van tientallen kleine aparte afbeeldingen.
• Alles is 100% regelbaar via de CSS.
• Het mouse-over probleem in Internet Explorer wordt hiermee verholpen.

Sprites worden vaak gebruikt in de navigatie van een website. Enkele bekende voorbeelden hiervan zijn de websites van Apple en Google.

Bekijk een voorbeeld van hoe een CSS sprite tot stand komt.