CssSprite – to wcale nie boli
- Mateusz Żeromski | 2010-11-21 | CSS Optymalizacja
Css sprite ostatnio to bardzo popularne słowo. Jednak jak patrzę na praktykę – w ogóle nie widzę aby ktokolwiek przestawił się na tę super nowość. Tutaj postaram się opisać co to jest ten CssSprite gdzie można znaleźć przykłady oraz jak to zastosować. Można by powiedzieć iż temat jest banalny – ale dlaczego w takim razie jest tak rzadko wykorzystywany? Moim zdaniem wynika to z lenistwa i braku chęci doskonalenia swoich umiejętności.
Wstęp teoretyczny
W CssSprite chodzi o to aby zamiast 20 obrazków wczytywanych do wyświetlenia strony – załadować jeden, a następnie go wypozycjonować za pomocą CSS. Niesie to za sobą bardzo wiele korzyści, tj.:
- Zmniejszenie obciążenia łącza – ładujemy jeden obrazek zamiast kilku
- Przyspieszenie ładowania strony www – użytkownik nie czeka na 20 obrazków tylko na jeden
- Łatwiej wprowadzać zmiany developerom – np. przy zmianie grafiki na stronie wystarczy podmienić jeden plik z elementami graficznymi.
A praktyka?
Praktyka wygląda słabo. Niewiele stron wykorzystuje tę „nowość”, (zdaję sobie sprawę , że moje witryny które aktualnie są online również są napisane po staremu). Wynika to stąd iż zysk z zastosowania taich technik pojawia się dopiero przy dużej skali, przy bardzo dużych odwiedzinach.
Bardzo dobrym przykładem jest Google. W wynikach wyszukiwania ładuje nam się tylko jeden obrazek z grafiami (tu załączony po prawej). Również polskie portale nie są w tyle, np. onet.pl ma taki obrazek [link]. Z tego co przejrzałem inne portale wp, interia itp to jednak Onet ma najciekawiej rozwiązaną tę kwestię. Pozostałe wymienione CssSprite wykorzystują przede wszystkim do ikonek
Prawdziwy przykład
Załóżmy iż chcemy wykonać element strony o taki stosując CssSprite.
Krok1: Piszemy kod html
1 2 3 4 5 6 7 8 9 10 11 | <div id="latest_news" class="box"> <div class="content"> <h4 class="info">Tytul wiadomosci<span> </span></h4> Treść wiadomosci </div> <ul class="navigation"> <li class="next"><a href="#">Nastepna wiadomosc</a></li> <li class="prev"><a href="#">Poprzednia wiadomocs</a></li> </ul> </div> |
Krok2: Tniemy obrazek
Krok3: Piszemy CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 | *{margin:0px;padding:0px;font: 12px/16px Arial;} h4{font-size:18px;color:#fff} #latest_news{width:216px;background:url('box_pociety.png') no-repeat 0 -61px;padding-top:5px;margin-left:100px;margin-top:100px;} #latest_news .content{border:#474444 solid; border-width: 0 5px;padding-bottom:30px;background:#fff;} #latest_news h4{background:url('box_pociety.png') no-repeat 0 0px;height:60px;line-height:60px;text-indent:60px;position:relative;} #latest_news h4.info span{width:50px;height:50px;position:absolute;background:url('box_pociety.png') no-repeat -20px -77px;left:5px;top:5px;} #latest_news p{margin: 0 10px;} #latest_news ul.navigation{background:url('box_pociety.png') no-repeat 0 -69px;height:5px;position:relative;} #latest_news ul.navigation li{position:absolute;background:url('box_pociety.png') no-repeat; width:20px;height:20px;font-size:5px;list-style:none;} #latest_news ul.navigation li.next{background-position:-0px -75px;right:32px;top:-25px} #latest_news ul.navigation li.prev{background-position:-0px -95px;right:10px;top:-25px} #latest_news ul.navigation li a{text-indent:-9999px;display:block;height:19px;width:19px;} #latest_news ul.navigation li a:hover{border:black solid 1px;} |
Krok4: Przykład
http://blog.zeromski.com.pl/tools/cssSprite/
Podsumowanie
Zwykle przy tego typu elementach stron koder wykorzysta kilka obrazków zamiast jednego. Tak naprawdę powinien wykonać jeden obrazek, i go odpowiednio spozycjonować. No ale cóż, tak jak mówiłem lenistwo oraz brak chęci doskonalenia powoduje iż w dalszym ciągu CssSprite pozostanie w sferze teorii podczas codziennych projektów.
Tagi: css, Optymalizacja
1 Saskatchewan 2010-11-25 21:10:56
O kurczę, myślałem, że mi się czytnik RSS zepsuł ;). A tak poza tym – całkiem interesujący temat.
2 Mateusz Żeromski 2010-11-28 14:26:18
Hej, no tak, wracam do pisania bloga – trochę ciekawych rzeczy się nauczyłem i teraz co nieco napiszę :)
3 Dartam 2010-11-29 00:33:32
Dzięki Mateusz! Nie słyszałem wcześniej o czymś takim. :-)
4 Olsza 2010-12-10 11:04:09
faktycznie Mateusz to rozwiązanie jest dobre i mało kto korzysta, a szkoda… jedną też ze stron korzysta strona http://www.wolnifarmerzy.pl/ to jest gra browserowa i jedna z nie licznych które korzystają w ten sposób, ładowanie strony jest szybkie :)
5 Widz 2011-01-13 15:09:04
Powiem tak – szkoda, że piszesz o tak prostych i znajomych rzeczach.
Mógłbyś się bardziej postarać….;/
6 uzi123 2011-02-01 21:04:28
No no. Niby to takie odkrycie, piękna nazwa, a ja o niej słyszałem już jakieś 3 lata temu, choć jak się nazywa to dowiedziałem się dopiero od Ciebie ;-)
Metoda ta została wymyślona jednak z dużo prozaiczniejszego powodu niż piszesz.
Otóż większość przeglądarek wczytuje/pobiera plik graficzny dopiero w momencie gdy jest to poprzednie. W związku z tym, gdy po najechaniu myszką na daną grafikę (np przycisk) ma się on zmienić na inny to pojawiało się znaczne opóźnienie. Wczytanie kilku przycisków w postaci jednego pliku graficznego rozwiązywało ten problem.
7 widmo 2011-07-23 15:42:55
No ale to dosc stary sposob ma ponad 10 lat jak jeszcze istnial polbox :D wiec nie wiem czmu to sie nazywa css sprite a nie fanta albo cola buahahaha oczywiscie pomysl zywcem wziety z programowania grafiki do gier 2D
8 Revenus 2011-10-07 19:00:15
Dobre, kiedyś o tym słyszałem ale zapomniałem całkiem o tym hicie, dzięki za przypomnienie ! Dobrze się postarałeś ;)
9 Aleksandra Małecka 2011-12-21 22:07:21
Stosuje spritesy od jakiegoś czasu. Wiele moich stron składa się z tylko 1-2 plików graficznych;]
Prosty sposób na szybsze ładowanie stron, kosztem większej zabawy z cięciem. Mimo wszystko gra warta świeczki;)
10 Marcin Kłeczek 2011-12-28 01:05:16
Pani Aleksandro proponuję użyć jakiegoś automatu do pakowania – będzie koszt mniejszy.
@widmo skoro piszesz o grach 2D, to powinieneś wiedzieć, dlaczego nazywa się to sprite :-)
11 pliki 2012-02-01 20:23:13
dobra technologia, którą mocno promuje google. Szkoda ze wśród koderów jest traktowana po macoszemu.