Sprajty CSS są sposobem na zredukowanie liczby żądań HTTP tworzonych dla obrazków, umieszczonych na Twojej stronie. Obrazki są łączone w jeden większy, pod zdefiniowanymi współrzędnymi X i Y. Podstawiając ten wygenerowany obrazek do elementów strony i używając własności CSS background-position, można wyświetlić potrzebny w danym miejscu fragment obrazka.

Technika ta może być bardzo efektywna w zwiększaniu wydajności strony, szczególnie w sytuacjach gdy na stronie znajduje się wiele małych obrazków, takich jak ikony. Dla przykładu Yahoo! home page używa tej techniki do wyświetlania ikon.

Niedogodności

Istnieje kilka denerwujących błędów w przeglądarkach, na które trzeba uważać podczas tworzenia sprajtów CSS.

Opera

Opera (co najmniej do wersji 9.0) nie rozpoznaje wartości pozycji tła większych niż 2042px lub mniejszych niż -2042px używając tej wartości jako granicznej. Narzędzie nasze rozwiązuje ten problem poprzez tworzenie w obrazku nowych kolumn za każdym razem, gdy pionowy limit zostaje przekroczony.

Safari

Safari ma problemy z powtarzaniem obrazków tła. Na szczęście łatwo można to rozwiązać poprzez ustawienie odpowiednio dużych marginesów poziomych (konfigurowalne).

Dalsze informacje

A List Apart opublikował artykuł zatytułowany CSS Sprites: Image Slicing's Kiss of Death, który wyjaśnia koncepcję CSS sprites. Jeśli jesteś początkujący w tej technice stanowczo zachęcamy udać się na A List Apart i zaznajomić z tematem.