Bir CSS Sprite Uygulaması

Tarih : 4 April, 2009 ::
Kategori : CSS
:: Etiketler : CSS, CSS Sprite, Erişilebilirlik, Phark

Bir web uygulamasında imajları görselliği zenginleştirmek adına kullanırız. Bu birbirinden bağımsız imajlar tarayıcı tarafında yüklenirken, sunucundan her biri için ayrı HTTP isteğinde bulunulur. Ne kadar çok imaj, o kadar çok istek demektir. Bu istekler ne kadar çoksa, sunucuya da o kadar çok yük biner. CSS Sprite olarak bilinen bu teknikle, web uygulamasında kullanılan imajların mümkün olduğunca birleştirilerek, HTTP istek sayısının düşürülmesi ve dolayısıyla sunucuya binen yükün mümkün olduğunca azaltılması sağlanır.

Yakın zamanda hazırladığım portfolio sayfasında, bu tekniği, hem navigasyon hem de sosyal profilimi ifade eden ikonların yaratılmasında kullandım. İsterseniz bu şirin ikonların nasıl hazırlandığını sizlere aktarayım.

CSS Sprite için İmajın Hazırlanması

CSS ve XHTML’e geçmeden, öncelikle ilgili resimleri bir araya getirmemiz gerekiyor. Bunun için hazırladığım tasarımda Fireworks Slice Aracını kullanarak ilgili ikonların hem normal görünüm, hem de üzerine fare ile gelindiğindeki görünümü için iki kere çıkış alıyorum. Çıkış alırken kayıpsız (lossless) png 24-bit seçeneğini kullanıyorum.

Daha sonra çıkış aldığım ikonları tek bir imaj seti oluşturacak şekilde alt alta diziyorum. Böylece toplam 20 imaj için 20 ayrı HTTP isteğinde bulunmaktansa 1 HTTP isteğinde bulunuyoruz. Şimdi de gerekli XHTML ve CSS kodlarımızı yazalım.

Sprite Tekniği İçin XHTML ve CSS

<ul id="Network">
    <li><a id="linkedin" href="http://www.linkedin.com/in/oztecnic">Linkedin</a></li>
    <li><a id="twitter" href="http://twitter.com/oztecnic">Twitter</a></li>
    <li><a id="ff" href="http://friendfeed.com/oztecnic" >FriendFeed</a></li>
    <li><a id="face" href="http://tr-tr.facebook.com/people/Ozgur-Ik/749048788" >Facebook</a></li>
    <li><a id="rss" href="http://feeds2.feedburner.com/Oztecnic" >RSS</a></li>
    <li><a id="tech" href="http://feeds.technorati.com/blogs/www.oztecnic.com" >Technorati</a></li>
    <li><a id="youtube" href="http://www.youtube.com/profile?user=oztecnic" >YouTube</a></li>
    <li><a id="lastfm" href="http://www.lastfm.com.tr/user/oztecnic" >Last.FM</a></li>
    <li><a id="digg" href="http://digg.com/users/oztecnic" >Digg</a></li>
    <li><a id="delicious" href="http://delicious.com/oztecnic" >Delicious</a></li>
</ul>

Yukarıda gördüğünüz gibi ikonları içeriği sırasız liste olarak ekledik. Şimdi CSS ile şekillendirelim.

ul#Network li {
    float:left; list-style-type:none;
    text-indent:-9999px;
}
    ul#Network li a {
            background:url(../images/standart/icons/network_sprite.jpg);
            display:block;
            height:35px; width:35px;
            overflow:hidden;
            margin:0 6px 0 0;
        }

        ul#Network li a#linkedin			{background-position:left top;}
        ul#Network li a#linkedin:hover		{background-position:left -35px;}
        ul#Network li a#twitter				{background-position:left -70px;}
        ul#Network li a#twitter:hover		{background-position:left -105px;}
        ul#Network li a#ff					{background-position:left -140px;}
        ul#Network li a#ff:hover			{background-position:left -175px;}
        ul#Network li a#face				{background-position:left -210px;}
        ul#Network li a#face:hover			{background-position:left -245px;}
        ul#Network li a#rss					{background-position:left -280px;}
        ul#Network li a#rss:hover			{background-position:left -315px;}
        ul#Network li a#tech				{background-position:left -350px;}
        ul#Network li a#tech:hover			{background-position:left -385px;}
        ul#Network li a#youtube				{background-position:left -420px;}
        ul#Network li a#youtube:hover		{background-position:left -455px;}
        ul#Network li a#lastfm				{background-position:left -490px;}
        ul#Network li a#lastfm:hover		{background-position:left -525px;}
        ul#Network li a#digg				{background-position:left -560px;}
        ul#Network li a#digg:hover			{background-position:left -595px;}
        ul#Network li a#delicious			{background-position:left -630px;}
        ul#Network li a#delicious:hover		{background-position:left -665px;}

Sırasız liste içerisindeki her liste elemanını yan yana getirmek için float özelliğini kullandık. text-indent:-9999px; ile XHTML’deki linklerin içindeki yazıları tarayıcı penceresinin dışına aldık. Bu linklerin içerisine yazı koymak zorunda değildik, ama CSS desteği olmayan bir platform için erişilebilir olmasını sağlamak için bu şekilde kullandık. Burada kullandığımız imaj yerine koyma tekniği Phark Tekniği, bu tekniği şu yazımda incelemiştim.

Daha sonra CSS’de genel link tanımlamalarını yaparak, son gelen bölümde her bir link ve o linkin :hover durumlarını oluşturduk. Bu kısımda oluşturduğumuz imajı üzerinde background-position özelliğini kullanarak, hangi link arka planında, imajın hangi bölümünün gösterileceğini tanımlamış olduk.

Uygulamanın çalışma halina portfoli sayfasından ulaşabilirsinz. Navigasyon yapısı da benzer bir şekilde hazırlanmıştır.

CSS Sprite ve Faydaları

CSS Sprite tekniğini kullanmanın bize sağladığı en önemli fayda, HTTP istek sayısının 1/20 oranına kadar düşmesi. Bu sunucu üzerindeki yükün, inanılmaz oranda azalması anlamına geliyor. Oluşturulan imaj ile tek bir noktadan ikonlarımızı kontrol edebiliyoruz.

Bir diğer avantaj ise; imajın hem ilk, hem de fare ile üzerine gelindiğindeki durumu sunucuya beraber yüklendiği için, :hover durumunda imajın yüklenmesi için belli bir zaman geçmesi gerekmiyor. Bu olumsuz durumu blogun ana navigasyonunda görebilirsiniz. Eğer resimler tarayıcınızın Cache dediğimiz önbelleğinde değilse, navigasyon linklerinin üzerine geldiğinizde diğer imajın yüklenmesini beklemek durumunda kalıyorsunuz. Bu teknik, bu durumu da ortadan kaldırıyor.

Diğer Kaynaklar
http://www.alistapart.com/articles/sprites/
http://www.iks5.com/css-sprite-kullanimi/
http://www.bildirgec.org/yazi/css-sprite-larin-kullanis-alanlari
http://webdeneyimleri.donanimhaber.com/css-sprite-teknigi/

Hemen Paylaş!

Fırından yeni çıkmış yazılardan haberdar olmak için RSS yayınıma abone olabilir ya da beni Twitter'dan takip edebilirsiniz.

Yorumla Bakalım

Yorumlara Git

Daha Fazlasını Oku!

Makale Detayı

Bu Makale için toplam 27 adet yorum bulunmaktadır...

Bu Makale 4 April, 2009 ve saat 12:35 itibariyle CSS kategorisi altına kaydedilmiştir. Bu makale ile ilgili yorumları RSS 2.0 beslemesinden takip edebilirsiniz.. Bu makale için yorum yapabilir, veya kendi web sitenize trackback sağlayabilirsiniz...

Bir CSS Sprite Uygulaması için toplam 27 yorum var...

yedincisenol Diyorki:
4 April, 2009 ve saat 16:09:00'de gönderdi...

Bende bir dezavantajını söyliyeyim; kod kalabalığı artıyor.

1
oztecnic Diyorki:
4 April, 2009 ve saat 16:18:32'de gönderdi...

Şenol merhaba, kod kalabalığı derken CSS’dekini kastediyorsun sanırım.

Konuya şu açıdan bakmalıyız, eğer bu işlemleri yine CSS kullanarak, ama ayrı ayrı imajlarla yapsaydık, yine aynı kalabalıklıkta kod yazmış olacaktık.

CSS dokümanındaki “kod fazlalığını” eğer klasik rolloverimage mantığı ile imaj ekleyip ona bir hover davranışı kullanılarak azaltılabilir, fakat kod kalabalığı bu sefer XHTML doküman içerisinde olacak ve javascript kullanmak durumunda kalacağız…

2
Yücel YILMAZ Diyorki:
4 April, 2009 ve saat 16:25:18'de gönderdi...

Güzel bir yazı olmuş. Tebrikler.

3
oztecnic Diyorki:
4 April, 2009 ve saat 23:39:35'de gönderdi...

Değerli görüşlerin için teşekkür ederim Yücel…

4
yakuter Diyorki:
5 April, 2009 ve saat 01:16:30'de gönderdi...

Mükemmel bir makale Özgür. İnsanlar henüz bunun değerini anlayamadılar. Yurtdışında bu teknikle tüm bir siteyi tasarlıyorlar Makaleyi en ince detayına kadar okudum. Gayet açıklayıcı, temiz bir anlatım. Mutlaka birilerinin oldukça işine yarayacaktır.

Bu arada vermiş olduğun istatistiksel değerler (1/20 ve 12 kb) güzel bir dayanak noktası.

Ellerine sağlık, böyle devam etmen dileğiyle

5
oztecnic Diyorki:
5 April, 2009 ve saat 21:45:33'de gönderdi...

@yakuter görüşlerin için çok teşekkür ederim…

Dediğin gibi yurtdışında çokça kullanılan bir teknik, konuyla ilgili yazılmış olan diğer yazılarla birlikte, ilgi duyan herkese faydalı olması dileğiyle…

6
Furkan Turan Diyorki:
17 April, 2009 ve saat 19:48:34'de gönderdi...

Güzel açıklayıcı olmuş, öncelikle bunu belirtmek isterim. Ayrıca bir de sorum var.

Ben bir kutucuk yapıyorum. Üst kısmına bir resim, alt kısmına bir resim ve yukarıdan aşağıya tekrar eden bir arkaplan resmi kullanıyorum.

Yukarıdaki resim ile aşağıdaki resmi birleştirip CSS sprite ile kullanabiliyorum. Ama bu kutucuğum arkaplanındaki yukarıdan aşağıya tekrar edecek olan 1px kalınlığındaki arkaplan resmini CSS sprite ile alamıyorum.

Soracağım soru bunu yapabilmemin yani bu üç resmi, tek resim dosyası yapıp; bir kısmını yukarıya, bir kısmını aşağıya, kalan kısmınıda arkaplana tekrar eder halde koymamın bir yolu var mıdır?

7
oztecnic Diyorki:
18 April, 2009 ve saat 14:30:12'de gönderdi...

@Furkan merhaba, güzel sorun için teşekkürler…

CSS Sprite tekniğinde, bakcground kullanımının bazı yetersizlikleri var, bu da aslında CSS’in şu aşamadaki yetersizliği ile ilgili… O açından bu tekniği “repeat edecek arkaplanlarda” uygulamaktan kaçınıyoruz.

Ama bahsettiğin örnek konusunda şöyle bir çözüme ulaşmak mümkün. Kutuda kullanacağın bütün resimleri yanyana gelecek şekilde sprite oluştur ve tekrar edecek alanın yüksekliğini diğer iki resimden hangisinin yüksekliği en fazlaysa ona eşitle…

Uzunlukları aynı kalsın. Bu şekilde repeat edecek orta bloğu CSS Sprite ile gerçekleştirebileceksin…

8
Furkan Turan Diyorki:
18 April, 2009 ve saat 18:32:05'de gönderdi...

Resimleri yanyana ekleyerek yapmtım ve oldu. Sağolasın cevabın için.

9
Semih Diyorki:
23 April, 2009 ve saat 15:05:36'de gönderdi...

Buda çok güzel bir kaynak olmuş…

Yazılanları harfiyen yaptım ancak resimlerin üzerinde siyah bir nokta oluşuyıor. Bunu yoketmek için ne yapabilirim acaba?

10
oztecnic Diyorki:
25 April, 2009 ve saat 14:52:02'de gönderdi...

@semih merhaba,

Sprite Imajını oluşturuken konumlandırmadan kaynaklı olarak bir siyah nokta oluşuyor olabilir… Örneğin linkini verirsen bakabilirim…

11
Ali OKTAY Diyorki:
16 July, 2009 ve saat 20:47:29'de gönderdi...

oztecnic, bu güzel makale için teşekkür ederim.

@Furkan Turan: Şu şekilde bir düzenleme yaparsan sorun yaşamazsın. Tekrar etmeyecek resimleri yatay olarak yerleştir. Tekrar edecek olanları ise her satır için bir tane koy. Böylece sorun yaşamazsın ve resim daha anlamlı olur diye düşünüyorum…

12
oztecnic Diyorki:
17 July, 2009 ve saat 02:26:52'de gönderdi...

@Ali, ben hem yorumun hem de katkın için teşekkür ederim…

13
serhat Diyorki:
31 July, 2009 ve saat 17:50:20'de gönderdi...

Teşekkürler , güzel makale olmuş diğer anlatımlara göre senin yazdıklarını daha kolay anlıyorum gerçekten , birde sana sormak istediğim bişey var ben CSS de hataları bilgisayarımda ie8 yüklü oldugundan sadece ie8 de test edebiliyorum , ie7 ve i6 da nasıl test ederim böyle bir program makale vs. birşey varsa yazarsan çok sevinirim tekrar çok teşekkürler.

14
oztecnic Diyorki:
1 August, 2009 ve saat 09:20:58'de gönderdi...

@Serhat, buradan hızlıca cevap vereyim, IE6-IE7 yi IETester isimli aracı kurarak gerçekleştirebilirsin.

Daha net ve doğru sonuç alabilmek için ikinci bir bilgisayarda (virtual ya da gerçek) bu tarayıcıları bulundurarak testlerini gerçekleştirebilirsin.

15
Serhat Diyorki:
1 August, 2009 ve saat 18:37:28'de gönderdi...

Tekrar teşekkürler , inan çok yardımın dokunuyor Allah Razı Olsun senden.

16
kuflu Diyorki:
15 August, 2009 ve saat 15:00:56'de gönderdi...

Bu teknik gerçekten çok güzel sistem kaynakları açısındanda teşekkür ederim

17
oztecnic Diyorki:
16 August, 2009 ve saat 14:47:12'de gönderdi...

@kuflu evet, HTTP İstek sayısını düşürmesi en büyük avantajı,

Ben teşekkür ederim…

18
Tayfun Erbilen Diyorki:
6 November, 2009 ve saat 02:08:52'de gönderdi...

Merhabalar, güzel bir anlatım olmuş, doyurucu ve açıklayıcı bilgiler. Kafalarda soru işareti bırakmayacak sade bir dil Bu tekniği son zamanlarda bende kullanıyorum ve takip ettiğim yabancı kaynaklı sitelerin neredeyse tamamında bu teknik kullanılmakta. CSS öğrenmek isteyen birinin bunu bilmesini zorunlu kılmak gerek İyi çalışmalar.

19
Tayfun Erbilen Diyorki:
7 November, 2009 ve saat 11:48:50'de gönderdi...

bu arada ul#Network li burada list-style-type: none; vermeyi unutmuşsun.

20
oztecnic Diyorki:
14 November, 2009 ve saat 17:26:37'de gönderdi...

düzeltme için teşekkürler Tayfun, reset.CSS ile bütün ul elementlerini sıfırladığım için ilgili kural gözümden kaçmış…

21
ali Diyorki:
12 December, 2009 ve saat 15:09:07'de gönderdi...

kardeş güzel bir kaynak olmuş işimize yaradı sağolasın.

22
joyologo design Diyorki:
2 February, 2010 ve saat 20:00:36'de gönderdi...

güzel anlatım ve uygulama çok teşekkürler..

23
CSS Background Özellikleri | SoniQuake Kişisel Web Sayfası Diyorki:
22 March, 2010 ve saat 15:42:03'de gönderdi...

[...] böylece sunucu daha az çalışıyor. Daha ayrıntılı açıklama için Oztecnic’in “Bir CSS Sprite Uygulaması” adlı yazısına [...]

24
Gürhan Diyorki:
23 March, 2010 ve saat 01:09:01'de gönderdi...

Yazını ve çalışmalarını çok beğendim.Yapabileceğimden emin değilim ama sitemde deneyeceğim…

25
Gürhan Diyorki:
31 March, 2010 ve saat 11:28:28'de gönderdi...

Evet siteme eklemeyi başardım(burçlar bölümü)..Tekrar teşekkür ederim gerçekten güzel bir yazı…Merak ettiğim bir konu var, ikinci bir cdd sprite uygulamak için kodlarda nasıl bir değişiklik yapmamız lazım..A yazan kısımları b yaptığım zaman linkler görünmüyorda…

26
Haymac Diyorki:
24 May, 2010 ve saat 01:23:48'de gönderdi...

@gurhan

ul#Network li a#lastfm burdaki a yı kastediyorsan bunu değil ul#Network bu Network kısmını değiştirmen gerekiyor. sıfırdan bir blok hazırlamalısın bunun için.

27