Artykuł

cze 23 2011
0

CSS Sprites

Webmaster, to druga obok aplikacji tygodnia cykliczna seria wpisów, jaką chcę wprowadzić na Alt Control Delete. Celem wpisów tego typu, będzie prezentacja praktycznych i zarazem szybkich w wykonaniu sztuczek, które możemy zastosować na stronie by ją zoptymalizować/uatrakcyjnić/unowocześnić (wykreśl dowolną opcję).

Na pierwszy ogień: CSS Sprites.

Czym są Sprite'y CSS?

Kiedy jakiś czas temu, opisywałem w jaki sposób zoptymalizować stronę pod kątem porad Google, ominąłem jedną z porad Google, która dotyczy tworzenia sprite'ów CSS. Dziś chciałbym wrócić do tego tematu, najpierw musimy się jednak zastanowić czym tak właściwie są tytułowe sprite'y. Zacznijmy od początku.

Każda tworzona przez nas strona, z reguły posiada przynajmniej kilka-kilkanaście obrazków, składających się na jej layout. Wczytanie każdego z tych obrazków, zajmuje czas i wymaga wysłania żądania pobrania danych przez przeglądarkę użytkownika oraz wysłania odpowiedzi przez serwer naszej strony WWW. Nie dość, że zajmuje to wszystko dużo czasu, to dodatkowa komunikacja zwiększa zużyty przez obie strony transfer oraz blokuje inne połączenia, które mogłyby zostać zrealizowane w tym samym czasie.

Lekarstwem na całe zło, są specjalne obrazki, które zazwyczaj posiadają przezroczyste tło i tworzą kompilację kilku mniejszych obrazków , które umieścimy na naszej stronie. Sumarycznie tworzą taki właśnie efekt jak na screenie 1:

Wiadomo jednak, że czegoś takiego wprost nie umieścimy na stronie, lecz musimy to pociąć i wpasować w konkretne lokalizacje na naszej stronie. A jak to najłatwiej zrobić? Oczywiście za pomocą CSS i odpowiednich jego właściwości:)

Najpierw musimy jednak wygenerować nasz zbiorczy obrazek.

Generowanie obrazka

Patrząc na obraz ze screenu 1, wydaje się, że stworzenie obrazu potrzebnego do naszych sprite'ów nie jest raczej skomplikowane. W istocie tak jest i w rzeczywistości, aczkolwiek pojawia się tu mały problem...

Stosując nasz trick w CSS, konieczne jest ustawienie właściwości background-position, która pobiera lewy i górny róg naszego pod obrazka, czyli innymi słowy pobiera pozycje obrazu znajdującego się w spricie. Tworząc taki obraz ręcznie, musielibyśmy wszystko obliczać sami i bardzo precyzyjnie wklejać kolejne elementy do naszego obrazu. Zasadnicze pytanie w tym momencie brzmi - po co się męczyć skoro są tego odpowiednie kreatory:)?

Jednym z takich kreatorów, jest właśnie aplikacja webowa CSS Sprites generator, która w oparciu o nasze małe pliki graficzne wygeneruje sprite'a dla nas:)

Aby rozpocząć tworzenie nowego sprite'a, musimy najpierw załadować nasze pliki graficzne.

Następnie, warto ustawić dodatkowe opcje:

  • Padding between elements - opcja bardzo przydatna, ponieważ chroni nas przed nachodzeniem obrazków na siebie w procesie wyświetlania strony. Wartość 30-40px to jak dla mnie absolutne minimum. Chyba, że każdy z waszych obrazków będzie miał dokładnie wytyczony rozmiar za pomocą CSS. W takim przypadku może to być nawet 0
  • Border around the whole image - utworzy obramowanie o zadanej szerokości wokół naszego sprite'a. Jak dla mnie domyślna wartość 0 (czyli brak obramowania) to wartość optymalna
  • Align elements - wartość ustawiona na left, spowoduje wyrównanie elementów do lewej krawędzi i tym samym stworzenie pionowego sprite'a. Wartość ustawiona na top, wyrówna elementy do góry i utworzy poziomego sprite'a
  • Background color - zdecydowanie lepiej w tym przypadku ustawić kolor tła na transparent, chyba że wiemy że nasze obrazki na pewno będą miały tło w takim a nie innym kolorze. Co do przezroczystości - mała uwaga. Starsze przeglądarki w tym np. wciąż obecny na rynku IE6, mają problem z przezroczystymi obrazami PNG, a obraz takiego właśnie typu jest generowany przez ten generator

Po ustawieniu wszystkich opcji, możemy rozpocząć generowanie sprite'a poprzez naciśnięcie przycisku Generate.

Efekt powinien być podobny do tego zaprezentowanego na screenie 4:

Otrzymujemy możliwość pobrania wynikowego obrazka PNG, przykładu w HTML oraz gotowe właściwości CSS do wykorzystania na stronie. Warto zapisać sobie te wartości, lub pobrać przykładowy HTML, by móc skorzystać z tego również w przyszłości.

CSS

Po wygenerowaniu sprite'a, przyszła pora na CSS. Dla każdego elementu, który ma zawierać jakiś z naszych obrazków, musimy zastosować mniej więcej taki kod:

.moja-klasa{
    background: url("result.png") no-repeat;
    background-position: 0px -60px;
    width: 32px;
    height: 32px;
}

moja-klasa, to oczywiście nazwa jakiejś naszej klasy CSS. Właściwość background z wartością url oraz opcją no-repeat wskazuje na obrazek naszego sprite'a i blokuje jego powtarzanie. Background-position, określa umiejscowienie naszego obrazka wewnątrz sprite'a. Ten kod wystarczy by wyświetlić już konkretny obrazek. Ostatnie dwie właściwości określają rozmiar elementu określonego klasą, która akurat rozmiarem pokrywa naszą konkretną ikonę. Jeśli byśmy je pominęli i nie ustawili paddingu, to istniało by ryzyko wyświetlenia kolejnego elementu w miejscu naszego obecnego.

O tym, że sprite'y działają, możecie się przekonać oglądając ten blog:)

Podsumowanie

To na tyle w pierwszym wpisie z nowej serii Webmaster. Nowe wpisy z tej serii, zostały okraszone tagiem Webmaster:)

Data ostatniej modyfikacji: 28.11.2011, 18:34.

Komentarze

blog comments powered by Disqus