CSS sprites

Akik még csak most ismerkednek a webfejlesztéssel, ezen belül is a frontend készítéssel, azok jogosan rakhatják fel a kérdést, hogy mi is ez a CSS sprite?

Nos, röviden megfogalmazva ez nem több, mint egy hangzatos kifejezés egy kódolási módszerre. A lényege annyi, hogy a linkeknél elkészítjük az összes állapotnak megfelelő háttérképet, majd ezeket egy képként összefűzzük és csak pozícionáljuk a képet a link hátterében.

A módszer előnye a hagyományos 3 vagy több képes megoldással szemben, a következő:

• ha az egeret a link fölé visszük, vagy kattintunk a linken, akkor nem kell az új képek betöltődésére várni
• mivel már az oldal megnyitásakor megjelenik a kép, így nincs villogás a link használatakor (lásd: előző pont)
• egy HTTP kérés lesz a három vagy több helyett (csökken az oldal betöltődési ideje)
• nem igényel több munkát, mint a hagyományos megoldás

Az előnyök után jöjjenek a hátrányok:

• a nem használt linkek esetében 2-3x akkora méretű kép töltődik be, mint amekkorát a felhasználók látnak
• a kép elkészítésénél ügyelni kell, hogy minden pixel ott legyen, ahol mi szeretnénk

Az előnyök és hátrányok ismertetése után jöjjön egy egyszerű példa a használatra (a példakód az oldalon található Creative Commons link működését mutatja be, ezért mégegyszer nem raknám ki a linket):

cssa, a:link, a:visited{
    width: 140px;
    height: 35px;
    display: block;
    background: url('/style/image/cc_logo.png') 0px 0px;
}

a:hover{
    background: url('/style/image/cc_logo.png') 0px -35px;
}

A link ezt a képet tölti be:

A kód működése nagyon egyszerű. A linkünknek először is megadjuk a méretét (width és height, illetve megadjuk, hogy blokkosan jelenjen meg), majd pozícionáljuk a háttérképet, hogy az első 140x35 pixeles része látszódjon a képnek.

Mikor a link fölé visszük az egeret, akkor a :hover esemény következik be, melyben megadtuk, hogy a kép -35 pixellel tolódjon el felfelé (vagyis egészen pontosan a kép 0,0 pixele a 0,-35 helyen legyen). Ekkor már a kép második 35 képpont magas sávját látjuk.

Természetesen beállítható lenne az is, hogy az :active eseményre egy harmadik sáv/kép töltődjön be -70 pixeles eltolással, valamint a már megtekintett linkeknek is lehetne külön képet adni, stb., de a fenti kód alapján már szerintem bárki boldogul vele.