Bir sayfa veya web sitesinde CSS sprite'ları nasıl…

CSS sprite'ları, birkaç küçük resmi tek bir büyük dosyada (sprite) birleştirerek ve ardından bu büyük resmin ihtiyaç duyulan kısmını CSS kullanarak sayfa öğelerinde göstererek uygulanır.

Ana adımlar:

Sprite Oluşumu: Birleştirilecek tüm resimler (ikonlar, küçük arka planlar vb.) tek bir resme yerleştirilir. Bu işlemi manuel olarak grafik düzenleyici ile veya otomatik araçlar/sprite üreticileri kullanarak yapabilirsiniz.
CSS Uygulaması: Sprite'tan resim "yerleştirilecek" her öğe için aşağıdaki CSS özellikleri ayarlanır:
- background-image: Sprite dosyasının yolunu belirtir.
- background-repeat: no-repeat;: Arka plan resminin tekrarını devre dışı bırakır.
- background-position: Bu öğe için gösterilmek istenen sprite bölümünün sol üst köşe koordinatlarını belirler. Bu koordinatlar, öğenin üst sol köşesinden yatay ve dikey kaydırmayı gösterir.
- width ve height: Sprite bölümünün gösterileceği alanın boyutlarını belirler. Bu boyutlar genellikle orijinal ikon veya resim boyutlarına karşılık gelir.

İki ikon için sprite kullanımı örneği:

/* Sprite dosyası: icons.png */

.icon {
  background-image: url('icons.png'); // Sprite dosyasının yolu
  background-repeat: no-repeat; // Tekrar etme
  width: 32px; // Öğenin genişliği
  height: 32px; // Öğenin yüksekliği
  display: inline-block; /* veya başka bir yöntemle öğeyi blok/inline-block yapma */
}

/* İkon 1: sprite'ta 0, 0 konumunda */
.icon-home {
  background-position: 0 0;
}

/* İkon 2: sprite'ta -40px, 0 konumunda (örneğin, ikonlar arasında 8px boşluk varsa) */
.icon-settings {
  background-position: -40px 0;
}

Avantajlar:

HTTP isteklerinin azaltılması: Birden fazla isteğin yerine, tarayıcı sadece bir sprite dosyasını yükler, bu da sayfa yükleme süresini kısaltır.
Önbellekleme: Tek büyük bir dosya önbelleğe alınır, küçük dosyalar yerine.

Dezavantajlar:

Bakım zorluğu: Resim ekleme/değiştirme işlemlerinde sprite yeniden oluşturulmalı ve CSS koordinatları güncellenmelidir.
Büyük veya çok farklı resimler için uygun değildir.

Bir sayfa veya web sitesinde CSS sprite'ları nasıl uygulanır?