İçerik Pazarlama

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:

CSS Sprite Örneği

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 sprite açık karanlık

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.

Douglas Karr

Douglas Karr CMO'su AÇIK İÇGÖRÜLER ve kurucusu Martech Zone. Douglas düzinelerce başarılı MarTech startup'ına yardımcı oldu, Martech satın almaları ve yatırımlarında 5 milyar doların üzerindeki durum tespitine yardımcı oldu ve şirketlere satış ve pazarlama stratejilerini uygulama ve otomatikleştirme konusunda yardımcı olmaya devam ediyor. Douglas, uluslararası alanda tanınan bir dijital dönüşüm ve MarTech uzmanı ve konuşmacısıdır. Douglas aynı zamanda Dummie's Guide ve iş liderliği kitabının yayınlanmış yazarıdır.

İlgili Makaleler

Başa dön düğmeye
Kapanış

Adblock Algılandı

Martech Zone sitemizden reklam geliri, bağlı kuruluş bağlantıları ve sponsorluklar yoluyla para kazandığımız için size bu içeriği ücretsiz olarak sağlayabilir. Sitemizi gezerken reklam engelleyicinizi kaldırırsanız seviniriz.