Yükleniyor...

CSS Görsel Sprite’ları

Optional Advanced az önce !important’ı işledi — nadir bir override bayrağı. Bu oturum farklı bir optional konu: görsel sprite’lar. Eski stil sayfalarında ve bazı legacy ikon setlerinde görürsünüz. Fikir basit: bir resim dosyası, birçok ikon; background-position küçük pencereden hangi karo’nun görüneceğini seçer.

Doğrudan yanıt

CSS image sprite, yan yana birkaç ikonu (veya düğme durumunu) tutan tek bir sayfa görüntüsüdür. Her UI öğesi sabit genişlik ve yükseklik, aynı background-image ve istenen karo kutuyu doldurana kadar sayfayı kaydıran bir background-position alır. Her ikon ayrı bir HTTP isteğiyken sprite’lar istek sayısını keserdi. Yeni işte genellikle SVG ikonlar, satır içi SVG veya küçük bir ikon sistemi tercih edin — sprite’ı mevcut bir sayfayı korurken veya legacy tasarıma uymanız gerektiğinde tutun.

Sprite’lar neden vardı?

Yıllar önce her ikon çoğu zaman bir HTTP gidiş-dönüşü daha demekti. Yirmi minik PNG’yi tek sayfada birleştirmek: bir indirme, bir önbellek girişi. Tarayıcılar sonra CSS ile o sayfa üzerinde farklı «pencereler» boyardı. HTTP/2 ve modern paketleme bu acıyı azalttı; ölçeklenebilir vektör ikonlar genellikle daha keskin — ama konumlandırma kalıbı, eski CSS açtığınızda hâlâ yararlı bir okuryazarlıktır.

Üç parça

Şunlara ihtiyacınız var:

  1. Bir sayfa — örneğin satır veya ızgarada karoları olan icons.png
  2. Bir kutu — bir karoya uyan width ve height (sıkça display: inline-block veya blok bağlantı)
  3. Bir kaydırma — doğru karoyu kutunun altına getiren background-position
    background-repeat: no-repeat sayfanın döşenmesini engeller. İkon başına ayrı dosya yüklemezsiniz; konumla kırpıyorsunuz.

Ortak sayfada ilk karo

Her ikonun 32×32 piksel olduğu bir sayfa düşünün. İlki sol üstte. Öğenin kutusu 32×32, arka plan 0 0’dan başlar:

First icon tile from a shared sheet

css 
.icon {
display: inline-block;
width: 32px;
height: 32px;
background-image: url("icons.png");
background-repeat: no-repeat;
background-position: 0 0;
}

Kutu bir viewport gibi davranır. icons.png’nin yalnızca sol üst 32×32’si görünür. Sayfanın geri kalanı oradadır — öğenin boyutuyla kırpılmıştır.

İkinci ikon: sayfayı kaydırın

Sonraki ikon 32px sağda başlıyorsa, arka planı 32px sola kaydırın (negatif X). Aynı görüntü, aynı kutu boyutu, farklı pencere:

Second icon with a horizontal offset

css 
.icon-home {
display: inline-block;
width: 32px;
height: 32px;
background-image: url("icons.png");
background-repeat: no-repeat;
background-position: 0 0;
}

.icon-search {
display: inline-block;
width: 32px;
height: 32px;
background-image: url("icons.png");
background-repeat: no-repeat;
background-position: -32px 0;
}

Negatif X sayfayı sola çeker; ikinci karo pencereyi doldurur. İkinci bir ikon satırı Y’yi de değiştirir (örneğin -32px -32px). Gerçek sayfanızdan ölçün — kaydırmaları ezberden tahmin etmeyin.

Başka karodan hover

Düğme setleri sıkça varsayılan ve hover (veya active) durumlarını aynı sayfaya koyar. :hover’da yalnızca background-position değiştirin:

Hover state from another sprite tile

css 
.btn-icon {
display: inline-block;
width: 40px;
height: 40px;
background-image: url("btn-sheet.png");
background-repeat: no-repeat;
background-position: 0 0;
}

.btn-icon:hover {
background-position: -40px 0;
}

İkinci görüntü dosyası yok — yalnızca başka bir kırpma. Kontrol zıplamasın diye kutu boyutunu sabit tutun.

Sakin sayfa alışkanlıkları

Sayfayı her zaman açık bir kutu ve no-repeat ile eşleştirin. Sınıfları yalnızca piksel hesabıyla değil, rolle adlandırın:

Named sprite roles and no-repeat

css 
.sprite {
display: inline-block;
background-image: url("icons.png");
background-repeat: no-repeat;
}

.sprite--mail {
width: 24px;
height: 24px;
background-position: 0 -48px;
}

.sprite--bell {
width: 24px;
height: 24px;
background-position: -24px -48px;
}

Karo ızgarasını kısa bir yorumda belgelendirin (karo boyutu, satır sırası); sonraki bakıcı sihirli sayıları tersine mühendislikle çözmek zorunda kalmasın.

O zamanki sprite’lar, şimdiki ikonlar

📊 Sprite sheets vs modern icon approaches

Approach Best when Watch out
CSS image sprite (PNG sheet) Legacy UI you must keep; one cached sheet already in the project Raster scales poorly; offsets break if the sheet changes
Inline SVG / SVG sprite Crisp UI icons at any size; easy theming with currentColor Slightly more markup or build setup
Icon font Very old stacks that already ship one Accessibility and ligature quirks; harder to theme than SVG
Separate PNG per icon Rare one-off graphics Many requests on old HTTP/1 connections
Real <img> photos Content images, galleries, product shots Not a job for background-position sprites

Görsel galeri ve duyarlı görseller dersleri gerçek <img> kullanır (flex küçük resimler, object-fit, srcset). Sprite’lar genellikle arka planda dekoratif UI chrome’dur — anlamlı alt metinli içerik fotoğraflarının yerine geçmez.

Yeni UI için modern ikonları tercih edin

Taze bir arayüzde SVG ile başlayın (satır içi veya küçük bir SVG sprite sistemi). Daha keskin kenarlar, daha kolay renk, kırılgan piksel kaydırmaları yok. Klasik PNG sprite’a yalnızca tasarım paketi zaten bir sayfaysa veya o sayfaya bağlı CSS’i yamalıyorsanız gidin.

When a sprite is the wrong tool

css 
/* Content photo — use <img>, not a sprite crop */
.hero-photo {
max-width: 100%;
height: auto;
}

/* UI chrome — sprite OK only if the sheet already exists */
.toolbar .icon-save {
width: 16px;
height: 16px;
background-image: url("legacy-toolbar.png");
background-repeat: no-repeat;
background-position: -64px 0;
}

Kendiniz deneyin

  1. Kâğıda 3 ikonluk bir satır çizin (veya gerçek bir sprite açın). Karo genişliğini not edin (ör. 32px).
  2. background-position: 0 0 ve eşleşen kutulu .icon-a oluşturun.
  3. -32px 0 (veya gerçek ikinci kaydırma) ile .icon-b ekleyin.
  4. Genişlik/yüksekliği değiştirmeden üçüncü karoya giden bir hover kuralı yazın.
  5. Yorumda bir cümle: bu sayfa neden hâlâ var (legacy) veya bir sonraki sefer neden SVG kullanırsınız.

Sık hatalar

  • İçerik fotoğraflarını sprite’a koyup düzgün alt / semantiği kaybetmek
  • width ve height unutup tüm sayfanın görünmesi veya kırpmanın bozulması
  • Sayfayı ters yöne kaydırmanız gerekirken pozitif kaydırma kullanmak
  • background-repeat açık kalınca karoların kutu içinde çoğalması
  • Yeni bir uygulamayı varsayılan olarak PNG sprite üzerine kurmak (SVG yerine)
  • Kendi sayfanızı ölçmeden eğitimden kaydırma kopyalamak

Özet

  • Sprite tek sayfadır; background-position sabit kutuyu hangi karo’nun dolduracağını seçer
  • Tarihsel olarak birçok minik ikon için HTTP isteklerini azalttı
  • no-repeat, kararlı boyutlar ve rol adları; ızgarayı belgelendirin
  • Yeni UI için SVG (veya benzeri) tercih edin; sprite’lar legacy sayfalar için
  • İçerik görselleri gerçek <img> kalır — galeri ve duyarlı görseller ayrı iş
  • Optional Advanced sonraki konu: çok sütun (multi-column)

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör

❓
7
Sorular
🎯
70%
Geçmek İçin
♾️
∞
Süre
🔄
∞
Deneme

📝 Talimatlar

  • Her soruyu dikkatle okuyun
  • Her soru için en iyi cevabı seçin
  • Quiz'i istediğiniz kadar tekrar alabilirsiniz
  • İlerlemeniz üstte gösterilecek
Konu 72 / 72
Css Ders