İnternet standartlarının yükselişi ile CSS, yeni bir soluk getirdi hem kullanıcılara hem de programcılara. Son dönemin de yeni soluğu Sprite CSS yine hem kullanıcı açısından hem de site yöneticileri açısından pek çok avantajı beraberinde getirdi. Makalemizde Sprite CSS’in ne olduğuna, kullanıcılara, site yöneticilerine ve programcılara ne gibi avantajlar sağladığına ve Sprite CSS’in nasıl oluşturulacağına dilim döndüğünce değinmeye çalışacağım. Aslında makaleyi kendi adıma unutmamak için yazdığımı da belirtmek isterim (:
CSS Sprite Nedir?
Bir projeyi tasarlarken her bölümün imajlarını yani resimlerini butona hatta ikonlara inene kadar tek tek ayırırır ve kodlamasını da yine her bölüme ayrı resim çağırarak yaparız. Sprite ise düzgün bir biçimde yerleştirilmiş tek bir resim üzerinden tüm resimlerin göreini yapmamıza yardımcı oluyor.
Sanırım bu kısım biraz karşık oldu, biraz daha açmakta fayda var. Blogumun üst navigasyon (anasayfa/hakkımda…) menüsüne baktığımız zaman hepsinin ayrı bir resim olduğunu yine resimlerin üzerine geldiğimiz zaman yeni bir resmin çağrıldığını görmek mümkün. CSS Sprite yöntemine göreyse menü öğelerinin tüm resimlerini tek bir resimde toplayıp her seferinde yeni resim kullanmak yerine bir resim ile işimizi halletmiş oluyoruz. Yani sıkıştırmış oluyoruz.
CSS SPrite Tekniğinin Avantajları Nedir?
CSS kodlamacıları için avantajlarına değinelim ilk olarak. Normal tekniğe göre kod yazan kişiler birden fazla resimle çalışır. Komplike bir sistem olduğu zaman alıp başını gittiği durumlar da cabası. CSS Sprite ile durum tam tersi. O kadar fazla resim dosyası yerine birkaç tane resim dosyası ile çalışacaktır. Bu da daha az karışıklığa yol açacaktır.
Site yöneticisi de elbette çeşitli avantajlara sahip olacaktır. Birçok resmin birkaç kere yüklenmesinin önüne geçilerek sistem tüketiminden haliyle maliyetler biraz kısılacaktır. Sitenin yüklenmesi daha hızlı olacaktır.
Ziyaretçi de üzerine geldiği butonun a:hover konumuna gelmesi için beklemeyecek, butonlar diğer nesneler hemen yüklenecektir.
CSS Sprite Oluşturma
CSS Sprite için ilk önce kodlayacağımız alanları kendimize göre bölümlemek daha doğru olacaktır. Yani, navigasyon için ayrı bir sprite resim, içerik bölümü için ayrı, yan menüler için ayrı bir resim oluşturarak bölümlere ayırmak daha mantıklıdır. Resimleri kendimiz birleştirebiliriz ancak hatalar olmaması için yardımcı yazılımlardan medet ummak da işimizi kolaylaştıracaktır.
Şimdi ilk adımı atıp sanki normal tekniğe göre kodlama yapacakmış gibi resimlerimizi bölelim. Sonrasında kullanacağımız resimleri “zip” formatında sıkıştırıp CSS Sprite Generator‘a yüklüyoruz. Servis bize sprite resmimizi, sprite resim üzerindeki öğelerin kodlamamızı oldukça kolaylaştıracak biçimde konumlarını liste halinde bize veriyor. Şimdi tek iş kodlamaya kaldı.
CSS SPrite Kodlama
Bu kısmı kendim anlatmak yerine kendimin de kaynak olarak aldığım Web Deneyimleri’ne alayım sizleri. Videolu anlatım ile daha da pekiştirmiş olacağız.
CSS Sprite makalemizin sonuna geldik. Umarım faydalı olmuştur. Sorularınızı ister yorumlarda, ister iletişim formunda bana iletebilirsiniz. Başka bir makalede buluşmak üzere, hoşçakalın.
Güzel bir yazı olmuş. Bu konu son zamnlarda çok öenm kazandı. Http requestleri zaltması ve optimizasyon açısından
Eline sağlık Hamdi, bence kodlama yapacaklar bu noktaya dikkat etmeliler. özellikle yoğun trafiğe sahiplerse. Merak edenler için benim temanın şablon resimlerinden sadece biri;
http://img.dmry.net/blog/tema/genel.jpg
gördüğünüz gibi birden fazla simge içeriyor ve tek seferde hepsi birden yüklenmiş oluyor.
Hakan sitenin yüklenme hızına olsun, trafik kullanımına olsun her şeyine etki ediyor. Ve gerçekten kodlama yapanların işini de büyük ölçüde kolaylaştırıyor. Bahsettiğim servis kordinatları da çıkarıyor ve böylece eskisi gibi karışıp kalmaktan arınıyoruz 🙂
kordinat çıkarıyor oluşu büyük marifet, çünkü kendi temama yerleştirme yaparken, tüm kordinatları yazılım üzerinden elle hesaplamıştım ve bir yerden sonra kafa gidiyor 😀
Haliyle 🙂
Merhabalar,
Tek bir resim kullanmaktan kastınız nedir? Tam anlayamadım. Mesela ben android emülatör kurulumu ile ilgili resimli anlatımlar içeren bir yazı yazdım. bu resimleri nasıl tek bir resim üzerinden gösterebilirim? Bunu mu söylemeye çalışıyorsunuz? Ya da bu söyledikleriniz sadece tema resimlerinde mi geçerli olabiliyor? buton ve hover resimlerinde filan?
Teşekkürler…
görsele ulaşamıyoruz acaba videoyu bu yazıya koymamızın imkanı varmı?
Teşekkürler bloguma uyguladım ve gerçekten etkisini gördüm çok hızlı açılıyor ..!
vermiş olduğunuz link çalışmıyor, zaten en büyük sorun kodlamada ve bunla ilgili detaylı hiçbir bilgi yok …
Güzel bir paylaşım teşekkür ederim.
bu kodlamanın wp uyarlanması ve seviyesi düşük olanlar için anlatımı yokmu:)
Teşekkürler. DLE sitelerimde kullanıyorum seo açısından baya bi faydası var
css ile ilgili verdiğin fayadalı bilgiler için teşekkürler. Bu yöntemle aynı zamanda css sıkıştırıldığı için sitelerimizin daha hızlı açılmasına katkısı oluyor.