CSS Nedir?

Bir CSS kuralının anatomisi

HTML sayfanın ne söylediğini, CSS ise bunun nasıl göründüğünü tarif eder. Her kural bir seçiciden (hangi öğeler?) ve bir bildirim bloğundan (hangi özellik, hangi değer?) oluşur. Tarayıcı HTML'den DOM'u, CSS'ten de CSSOM adı verilen bir stil modelini kurar; ekrana çizilen sonuç bu ikisinin birleşimidir.

/* seçici */
.urun-karti h2 {
  font-size: 1.25rem;      /* özellik: değer */
  color: var(--metin-rengi);
  margin-block: 0 0.5rem;
}

Stiller üç yoldan gelebilir: <link rel="stylesheet"> ile bağlanan harici dosya, <style> bloğu veya öğenin style niteliği. Bakım ve önbellekleme açısından harici dosyalar genellikle en sağlıklı seçenektir; satır içi stiller ise tekrar kullanılamaz ve geçersiz kılınmaları zordur.

Kaskad, özgüllük ve kalıtım: hangi kural kazanır?

CSS'in adındaki "cascading", çakışma çözme mekanizmasını anlatır. Aynı öğeye birden fazla kural uygulandığında tarayıcı sırasıyla şunlara bakar: kuralın kaynağı ve önemi (tarayıcı varsayılanı, sitenin stilleri, !important), @layer ile tanımlanan kaskad katmanları, seçicinin özgüllüğü ve son olarak kaynak kodundaki sırası. Bir kimlik seçicisi (#menu) sınıf seçicisinden, sınıf seçicisi de etiket seçicisinden daha özgüldür.

Kalıtım ise ayrı bir kavramdır: color veya font-family gibi bazı özellikler alt öğelere aktarılır, margin veya border gibi yerleşim özellikleri aktarılmaz. Büyük projelerde stil hatalarının çoğu bu kuralların yanlış anlaşılmasından doğar. Sorunu !important ile bastırmak kısa vadede işe yarar, ama bir sonraki değişikliği daha da zorlaştırır.

Yerleşim ve duyarlılık araçları

Eski yöntemlerdeki float ve tablo hilelerinin yerini bugün iki yerleşim sistemi almıştır: tek eksenli dizilimler için Flexbox, satır ve sütunlu iki boyutlu düzenler için CSS Grid. Ekran genişliğine göre farklı kurallar uygulamak için media query, bileşenin içinde bulunduğu kabın boyutuna göre davranmak için container query kullanılır. Bunlar responsive tasarımın teknik temelidir.

CSS artık tek bir sürüm numarasıyla ilerlemiyor. "CSS3" adı alışkanlıkla kullanılsa da W3C'nin CSS Çalışma Grubu dili Selectors, Grid, Color gibi bağımsız modüller hâlinde geliştirir; her modülün kendi seviyesi vardır. Bir özelliğin kullanılıp kullanılamayacağına sürüm adına değil, hedef tarayıcılardaki desteğine bakarak karar verilir.

Performans: CSS neden render'ı engeller?

Tarayıcı, sayfanın biçimsiz hâlini gösterip sonra yeniden çizmemek için varsayılan olarak CSSOM hazır olana kadar içerik çizmez; yani CSS render'ı engelleyen bir kaynaktır. Büyük ve tek parça bir stil dosyası, özellikle yavaş mobil bağlantılarda ilk görüntülemeyi doğrudan geciktirir. Yaygın iyileştirmeler şunlardır:

• İlk ekran için gereken kuralları HTML içine almak; bu yaklaşıma kritik CSS denir.
• Yalnızca yazdırmada veya belirli genişliklerde geçerli stilleri media niteliğiyle bağlamak; tarayıcı bu dosyaları yine indirir ama render'ı onlar için bekletmez.
• Kullanılmayan kuralları temizlemek ve dosyayı küçültmek; büyük CSS çerçevelerinin tamamını yüklemek sık görülen bir israftır.
• Görsel ve gömülü içerik alanlarına boyut ayırmak; geç uygulanan stiller ve yer ayrılmamış öğeler CLS değerini bozar.

Arama motorları CSS'i nasıl kullanır?

Google sayfayı render ederken CSS dosyalarını da indirir; mobil uyumu ve içeriğin sayfadaki yerini ancak böyle anlayabilir. Bu yüzden CSS dosyalarını robots.txt ile engellemek sayfanın yanlış değerlendirilmesine yol açabilir. Öte yandan CSS ile metni kullanıcıdan gizleyip arama motoruna göstermek (arka planla aynı renkte yazı, ekran dışına itilmiş anahtar kelime blokları) Google'ın spam politikalarında açıkça sayılan bir ihlaldir. Sekme ve akordeon gibi kullanıcının açabildiği gizli içerikler ise bu kapsamda değildir; meşru bir arayüz desenidir.