CSS spirty představují způsob, jak snížit počet HTTP požadavků, které klient vyšle k získání prvků obsažených na stránce. Obrázky se sloučí do jednoho většího a umístí se na určených X,Y souřadnicích. Pak pomocí CSS atributu background-position můžeme nastavit vzniklý obrázek na pozadí různým elementům stránky a pomocí dalších CSS vlastností umístíme pozadí tak, aby požadovaný jednotlivý obrázek padl do viditelné oblasti elementu na stránce.

Tato technika může být velice efektivní při zvyšování výkonu stránek, obzvláště v situacích, kdy je použito mnoho malých obrázků - ikonek. Například Yahoo! home page, využívá techniku CSS spritů právě tímto způsobem.

Možné problémy

Webové prohlížeče obsahují několik nepříjemných chyb, které mohou způsobit problémy při používání CSS spritů.

Opera

Opera (minimálně do verze 9.0) nerozpozná pozici pozadí vyšší než 2042px nebo menší než -2024px. Generátor CSS spritů toto automaticky řeší uspořádáním ikonek do sloupců. Jakmile je dosaženo tohoto vertikálního limitu, založí se nový sloupec.

Safari

V Safari existuje problém s opakujícím se pozadím. Tento problém lze snadno řešit zadáním dostatečně velkého horizontálního posunu (lze nastavit).

Další zdroje

Na A List Apart byl publikován článek CSS Sprites: Image Slicing's Kiss of Death, kde je přehledně vysvětlen celý koncept CSS spritů. Pokud ještě nejste příliš obeznámen(a) s touto technikou, doporučujeme přečíst si více právě na A List Apart.