Kategori: CSS

CSS Sprite

İnternet teknolojisini uzaktan yakından takip eden herkes CSS Sprite‘ı duymuştur. Kim düşünmüşse bunu iyi etmiş.

CSS Sprite bize birçok fayda sağlar. Bunlardan birkaçını şöyle sıralayayım.

  1. Öncelikle görsel boyutunu azaltır. Yukarıdaki örnekte olduğu gibi; en sağdaki görselin boyutu 3.66 kB. Eğer tüm görselleri teker teker alsaydık toplam dosya boyutumuz 14.64 kB. olacaktı. Ancak hepsini birleştirip kullandığımızda boyut yaklaşık 9.5 kB.a kadar düşüyor.
  2. Dört yerine sadece bir tane görsel kullandığımız için HTTP isteği de dörtten bire düşüyor. Daha az istek olduğu için sitemiz daha hızlı açılıyor. Ne güzel değil mi!
  3. Diyelim sadece görsellerin normal hallerini koydunuz, “hover“larını koymadınız. Böyle bir durumda sayfanın ilk açılışında sadece normal halleri yüklenir haliyle. Fareyi görselin üzerine getirdiğinizde bu sefer “hover” hali çağırılır. Ama bu hali siteye önceden yüklenmediği için bu sefer de bunu yükler. Bu da belli bir zaman kaybına neden olur.

Diyeceksiniz, “sadece 5 kB. nedir ki!” Demeyin! Şöyle düşünün: Sitenize bir kişi girdiğinde server’a 5 kB. daha fazla yüklenecek. Sitenizin günlük ziyaretçi sayısına ortalama 100 desek; günde 500 kB. eder. Bunu aya çarparsanız 4.5 mB. eder ve bu sadece 5kB.lık bir fazlalıktan oluşan aylık değer. Bunun birden fazla olduğunu düşünürseniz, bunun size fazladan server masrafı olarak döneceğini tahmin edebilirsiniz.

Devamını oku »

CSS İle Ok Çizmek

Her resim sunucuya bir HTTP isteği gönderir. Ve bu istekleri sitemizin açılış süresini etkiler. Yani ne kadar az HTTP isteği olursa sitemiz o kadar hızlı açılır. Bu konuda işimize yarayabilecek ufak bir uygulamayla başlamak istiyorum. CSS ile konuşma baloncuğu oku çizmek.

div.arrowBox {
  width:500px;
  height:200px;
  background-color:#eee;
  margin:50px auto;
  position:relative;
}

div.arrowBox span {
  position:absolute;
  bottom:-30px;
  left:10px;
  border-top:30px solid #eee;
  border-left:10px solid #fff;
  border-right:30px solid #fff;
  }

p {
  padding:20px;
  color:#09F;
  font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size:12px;
}

Ben kodlamayı yaparken İngilizce isimler kullanmaya özen gösteriyorum. Çünkü kendimi Türkçe isimlere alıştırırsam bu sefer el alışkanlığıyla Türkçe karakter kullanabilirim. Böyle iyi.
Devamını oku »