CSS Nedir?
CSS (Cascading Style Sheets, yani “basamaklı stil sayfaları”), web sayfalarına biçim veren dildir. HTML her içeriğin ne olduğunu söyler; CSS ise nasıl görüneceğine ve nerede duracağına karar verir: renkler, yazı tipleri, boşluklar, yerleşim ve geçişler. Håkon Wium Lie tarafından 1994'te önerildi, ilk seviyesi 1996'da W3C tarafından tavsiye (Recommendation) olarak yayımlandı. Bugün onu W3C bünyesindeki CSS Çalışma Grubu, tarayıcı üreticilerinin de katılımıyla geliştiriyor.
Bir stil sayfası kurallardan oluşur: seçici (selector) hangi öğelerin etkileneceğini belirler, bildirimler de bu öğelerin özelliklerini ayarlar. “Basamaklı” sözcüğü, aynı öğeye birden çok kural uyduğunda hangisinin geçerli olacağını belirleyen açık sıralamayı anlatır. Flexbox ve grid içeriği satırlara, sütunlara ve alanlara yerleştirir; medya ve kapsayıcı sorguları (container queries) düzeni ekrana ya da bileşenin kapladığı alana göre uyarlar; CSS değişkenleri olarak da bilinen özel özellikler, bir tasarım sisteminin renklerini ve ölçülerini tek yerde tutar.
Tek parça bir “CSS3” ya da “CSS4” belgesi bulamazsınız: tek belge olarak yazılan son sürüm CSS 2.1'di; o zamandan beri dil, Selectors, Grid ya da Color gibi her biri kendi hızında ilerleyen modüller hâlinde büyüyor. CSS açık bir standarttır, kullanımı ücretsizdir ve bütün tarayıcılar onu destekler. Kapsayıcı sorguları ve :has() seçicisi gibi yeni özellikler sayesinde, eskiden JavaScript gerektiren işleri artık CSS üstleniyor.
CSS'yi Nerede Kullanıyoruz?
Kurduğumuz her site, ağır bir hazır temadan alınmış kodla değil, o marka için yazılmış CSS ile biçimleniyor. En çok şu işlerde ona güveniyoruz:
Her Ekrana Uyan Düzenler
Grid, flexbox ve kapsayıcı sorgularıyla her bölüm, dar bir telefondan geniş bir monitöre kadar kendini mantıklı biçimde yeniden düzenliyor. Ayrı mobil ve masaüstü sürümleri yönetmek zorunda kalmıyorsunuz.
Tasarım Sisteminiz Kodda
Figma tasarımınızdaki renkler, yazı ölçüleri ve boşluklar CSS değişkenlerine dönüşüyor. Tek bir yerde yapılan değişiklik bütün siteyi güncelliyor ve her sayfa markanızla tutarlı kalıyor.
Açık ve Koyu Tema
Ziyaretçinin cihaz ayarını prefers-color-scheme medya sorgusuyla izleyebiliyor, isterseniz bir geçiş düğmesi de ekliyoruz. İki renk takımı da aynı değişkenleri kullandığı için metinler her iki temada okunaklı kalıyor.
Sağdan Sola Arapça
Mantıksal özellikler (logical properties) boşlukları ve hizalamayı sol ve sağ yerine “başlangıç” ve “bitiş” olarak tanımlar. Böylece Arapça sürüm aynı stil dosyasından doğru biçimde aynalanıyor.
Neden CSS?
Daha Az JavaScript, Daha Hızlı Sayfa
Modern CSS yerleşimi, geçişleri ve pek çok etkileşim durumunu kendisi halleder. İhtiyaç duymadığımız her betik, tarayıcının indirip çalıştıracağı bir dosya eksik demektir; sayfalar telefonlarda da çabuk tepki verir.
Kalıcı Tutarlılık
Stiller tek bir yerde durur ve tasarım sisteminize uyar; yeni sayfalar ve sonraki güncellemeler de aynı markanın parçası gibi görünür.
Konfor ve Erişilebilirlik
Metinleri göreli birimlerle boyutlandırıyoruz; böylece ziyaretçinin tarayıcı ayarıyla birlikte büyüyorlar. Klavye kullananlar için odak çerçevelerini görünür tutuyor, “hareketi azalt” tercihine uyuyoruz.
Projenizde Nasıl İlerliyoruz?
Figma'da onaylanan tasarımdan başlıyoruz: renkler, yazı ölçeği, boşluklar ve bileşenler önce değişkenlere ve ortak stillere dönüşüyor. Ardından her düzeni önce mobil için kuruyor; geniş ekranları, sağdan sola Arapça sürümü ve koyu temayı adım adım ekliyor, her bileşeni bütün durumlarında kontrol ediyoruz.
Yayından önce gerçek telefonlarda ve Safari, Chrome, Firefox'ta deniyor, renk kontrastına ve klavye odağına bakıyor, kullanılmayan stilleri temizliyoruz. Hızı ve yerleşim kararlılığını PageSpeed Insights ve Lighthouse ile ölçüyoruz; böylece sayfa yüklenirken hiçbir şey yerinden oynamıyor.
