Açık ve Koyu Modda CSS Spriteları Nasıl Kullanılır
CSS Sprite'lar, web geliştirmede karakter sayısını azaltmak için kullanılan bir tekniktir. HTTP bir web sayfası tarafından yapılan istekler. Birden çok küçük görüntüyü tek bir büyük görüntü dosyasında birleştirmeyi ve ardından bu görüntünün belirli bölümlerini web sayfasında ayrı öğeler olarak görüntülemek için CSS kullanmayı içerirler.
CSS karakterlerini kullanmanın birincil yararı, bir web sitesi için sayfa yükleme süresini iyileştirmeye yardımcı olabilmeleridir. Bir web sayfasına bir resim her yüklendiğinde, yükleme sürecini yavaşlatabilecek ayrı bir HTTP isteği gerektirir. Birden çok görüntüyü tek bir hareketli görüntüde birleştirerek, sayfayı yüklemek için gereken HTTP isteklerinin sayısını azaltabiliriz. Bu, özellikle simgeler ve düğmeler gibi çok sayıda küçük resim içeren siteler için daha hızlı ve daha duyarlı bir web sitesiyle sonuçlanabilir.
CSS sprite'larını kullanmak, tarayıcı önbelleğinden yararlanmamızı da sağlar. Bir kullanıcı bir web sitesini ziyaret ettiğinde, tarayıcıları ilk istekten sonra hareketli grafiği önbelleğe alır. Bu, web sayfasında hareketli görüntü kullanan bireysel öğeler için sonraki isteklerin, tarayıcının zaten önbelleğinde görüntü olacağından çok daha hızlı olacağı anlamına gelir.
CSS Sprite'ları Eskisi Kadar Popüler Değil
CSS sprite'ları, eskisi kadar popüler olmasalar da, site hızını artırmak için hala yaygın olarak kullanılmaktadır. Yüksek bant genişliği nedeniyle, webp biçimleri, görüntü sıkıştırma, içerik dağıtım ağları (CDN), yavaş yüklenme, ve güçlü önbelleğe alma teknolojilerde, web'de eskisi kadar çok CSS sprite görmüyoruz… yine de bu harika bir strateji. Çok sayıda küçük resme atıfta bulunan bir sayfanız varsa özellikle yararlıdır.
CSS Sprite Örneği
CSS karakterlerini kullanmak için, hareketli resim dosyasındaki her bir görüntünün konumunu CSS kullanarak tanımlamamız gerekir. Bu genellikle ayarlanarak yapılır. background-image
ve background-position
model görüntüsünü kullanan web sayfasındaki her öğe için özellikler. Görüntünün x ve y koordinatlarını hareketli grafik içinde belirterek, tek tek görüntüleri sayfada ayrı öğeler olarak görüntüleyebiliriz. İşte bir örnek… tek bir görüntü dosyasında iki düğmemiz var:
Soldaki görüntünün görüntülenmesini istiyorsak, div'e şunu sağlayabiliriz: arrow-left
sınıf olarak, böylece koordinatlar yalnızca o tarafı gösterir:
.arrow-left {
width: 200px;
height: 200px;
background: url('sprite.png') no-repeat 0 0;
}
Sağ oku görüntülemek istiyorsak, div'imizin sınıfını şu şekilde ayarlardık: arrow-right
.
.arrow-right {
width: 200px;
height: 200px;
background: url('sprite.png') no-repeat -200px 0;
}
Aydınlık ve Karanlık Mod İçin CSS Spriteları
Bunun ilginç bir kullanımı, aydınlık ve karanlık modlardır. Belki de üzerinde koyu renkli bir arka planda görünmeyen koyu metin bulunan bir logonuz veya resminiz vardır. Aydınlık mod için beyaz bir merkeze ve karanlık mod için karanlık bir merkeze sahip bu düğme örneğini yaptım.
CSS kullanarak, kullanıcının açık mod mu yoksa karanlık mod mu kullandığına bağlı olarak uygun görüntü arka planını görüntüleyebilirim:
:root {
--sprite-image: url('sprite.png');
--sprite-width: 200px;
--sprite-height: 400px;
--sprite-x-light: 0;
--sprite-y-light: 0;
--sprite-x-dark: -200px;
--sprite-y-dark: 0;
}
@media (prefers-color-scheme: dark) {
:root {
--sprite-x-light: 200px;
--sprite-x-dark: 0;
}
}
.icon {
width: 32px;
height: 32px;
background: var(--sprite-image) no-repeat var(--sprite-x-light) var(--sprite-y-light);
}
.icon:hover {
background-position: var(--sprite-x-dark) var(--sprite-y-dark);
}
İstisna: E-posta İstemcileri Bunu Desteklemeyebilir
Gmail gibi bazı e-posta istemcileri, verdiğim örnekte açık ve koyu modlar arasında geçiş yapmak için kullanılan CSS değişkenlerini desteklemez. Bu, farklı renk düzenleri için hareketli grafiğin farklı sürümleri arasında geçiş yapmak için alternatif teknikler kullanmanız gerekebileceği anlamına gelir.
Diğer bir sınırlama, bazı e-posta istemcilerinin, CSS karakterlerinde yaygın olarak kullanılan bazı CSS özelliklerini desteklememesidir. background-position
. Bu, bağımsız görüntüleri hareketli görüntü dosyası içinde konumlandırmayı zorlaştırabilir.