Glossarium
CSS Sprites
CSS sprites is een techniek waarbij je meerdere achtergrondafbeeldingen in één bestand plaatst en met CSS de juiste afbeelding kiest per element. De techniek is gebaseerd op eenzelfde techniek die vooral in de jaren 80 en 90 veel gebruikt werd bij 2D platform spelletjes.
- Een voorbeeld van een sprite in een 2D platformspel
Een goede plaats om deze techniek toe te passen is bij achtergrondafbeeldingen die veranderen als er over een element gehovert wordt, dit omdat er dan geen korte pauze optreed waarin de alternatieve achtergrondafbeelding wordt geladen als er over een element gehoverd wordt. Omdat er door het gebruiken van deze techniek minder requests naar de server gemaakt worden laadt de pagina sneller, daarom is het ook een uitermate geschikte techniek voor het optimaliseren van je website of het beperken van je server load.
- Een voorbeeld van een plek waar CSS Sprites heel handig zijn
Een CSS sprite maak je door een element een vaste breedte en hoogte te geven die gelijk is aan de breedte en hoogte van de afbeelding in de sprite. Helaas is het hierdoor niet mogelijk om een achtergrondafbeelding te herhalen. Een voorbeeld van een CSS Sprite kan je hier vinden.
Zie verder:
