Kısım II · İnşaat · Bölüm 24

CSS: Görünüm ve yerleşim

Yapıdan sunuma, kutudan esnek düzene (CSS: styling and layout)

1. Kat 10Bizim uygulamamızSorular, puan, günlük seri ve can kuralları.
2. Kat 9Web ve tarayıcıHTML belgeyi, CSS sunumu, JavaScript davranışı kurar; bu bölümün çalışma alanı.
3. Kat 7–8İşletim sistemi ve ağDosyaları, süreçleri ve veri alışverişini sağlar; belge bunların üstünde çalışır.
4. Kat 0–6Bitten işlemciye, belleğe ve dillereÖnceki bölümlerde kurduğumuz temel. Tam kat planı.

Bölümün sonunda bir stilin neden kazanıp kaybettiğini, bir kartın neden beklediğinden geniş çıktığını ve şıkların dar alanda nasıl yer değiştirebildiğini açıklayabileceksin. Hedef bütün CSS özelliklerini ezberlemek değil, görünümü hesaplayan kuralları okuyabilmek.

24.1 Kural, seçici, özellik, değer

Bir önceki bölümün sonunda soru kartının ne olduğunu, şıkların hangi soruya ait olduğunu ve puanın nereye yazılacağını söyleyebiliyorduk. Fakat kartın genişliğini, şıkların arasındaki boşluğu veya başlığın rengini henüz tarif etmedik. Basamaklı Stil Sayfaları (CSS, Cascading Style Sheets), belge yapısının nasıl sunulacağını tarif eder. HTML'deki anlamı değiştirmeden aynı kartı dar telefonda başka, geniş pencerede başka yerleştirebilmemizin dayanağı budur. Bu ayrım “HTML'de hiç görünüm yoktur” demek değildir; tarayıcının varsayılan stilleri vardır. CSS, bu sunumu bilinçli kurallarımızla yönetir.¹

.soru-karti {
  color: #172b4d;
  background-color: #ffffff;
  padding: 1rem;
}

Bu parçanın tamamı bir kural (rule). Başındaki .soru-karti, hangi öğelerin hedeflendiğini söyleyen seçici (selector); nokta, bunun HTML'deki class değerini seçtiğini gösterir. Süslü parantezler bildirim bloğunu sınırlar. Her satır, bir özellik (property) ile bir değer (value) eşleştirir: color yazı rengini, background-color arka plan rengini, padding iç boşluğu belirler. İki nokta adı değerden, noktalı virgül bildirimleri birbirinden ayırır. Kapanış parantezi kuralı bitirir.¹

rem, kök öğenin yazı boyutuna bağlı bir uzunluk birimidir; bu bölümde boşluk ve boyutları yazı ölçeğiyle ilişkilendirmek için kullanacağız. px ise CSS piksel birimidir; onu her koşulda fiziksel ekranın tek noktasıyla özdeş sayma. Bölüm 2.6'daki RGB fikri, burada #172b4d gibi renk değerleriyle karşına çıkar. Birim ile rengin yazımı, özelliğin kabul ettiği değer türüne bağlıdır: padding: red anlamlı bir iç boşluk tarifi değildir.¹¹⁰

İlk dört seçici, öğe, sınıf, kimlik ve iç içelik ilişkisi üzerinden hedef kurar. Son örnekteki sözde sınıf (pseudo-class), HTML'e elle bir sınıf eklemek yerine öğenin durumuna göre eşleşir. Bu bir JavaScript olayı değildir; tarayıcının mevcut durumu CSS seçimine yansıtmasıdır. :focus-visible için “yalnızca klavyede olur” diye kesin kural koymuyoruz; göstergenin gerekli olup olmadığına tarayıcı karar verir.²¹¹

Kural neden öğenin içine yazılmak zorunda değil?

Bölüm 23.2'deki link satırı, style.css dosyasını belgeye bağlamıştı. Bir .sik kuralı, bu sınıfı taşıyan bütün şıklara uygulanabilir; her sorunun HTML'inde aynı rengi yeniden yazmayız. Bu, yalnızca yazmayı azaltmak değil, değişikliği tek yerde ifade etmektir. “Şıkların iç boşluğu artsın” kararı soru metnini veya doğru cevap verisini değiştirmemelidir. Ayrı dosya, ayrı sorumluluk için başlangıçtır; dosya düzeninin ayrıntısı Bölüm 27'de gelecek.¹

24.2 Kaskad, özgüllük, kalıtım

Aynı şık hem label, hem .sik, hem de .soru-karti'nın çocuğu olabilir. Birden çok kural onu hedeflediğinde hangi görünüm kazanacak? Kaskad (cascade), bu çatışmaları çözme düzenidir. “Dosyada en alttaki kural kazanır” ezberi eksiktir. Önce kaynağın ve önem düzeyinin, varsa kaskad katmanlarının etkisi vardır; aynı karşılaştırma düzeyindeki bildirimlerde seçicinin ağırlığına, eşitse kaynak sırasına bakarız. Bu bölümün örnekleri aynı yazar stil sayfasında, katman kullanmadan ve !important olmadan yazılmış normal bildirimlerdir.²

button { color: navy; }
.sik { color: green; }
#ozel-sik { color: purple; }
button { color: maroon; }

İlk satır bütün düğmelere koyu mavi yazı önerir. İkinci satır sik sınıfına yeşil, üçüncü satır ozel-sik kimliğine mor önerir. Son satır yine düğmeleri seçer ve ilk satırla aynı ağırlıkta olduğundan, yalnızca bu iki bildirim yarışıyorsa bordo kazanır. Fakat hedef düğme aynı zamanda sik sınıfındaysa sınıf seçicisinin ağırlığı tür seçicisinden büyüktür; sırf sonradan yazıldı diye button onu yenemez. Örnek öğede ayrıca ozel-sik kimliği varsa bu kez kimlik seçicisi üstün gelir. Değerlendirme bütün kuralı çöpe atmak için değil, çatışan her özellik için yapılır.²

Özgüllük (specificity), seçicinin bu karşılaştırmadaki ağırlığıdır. Temel sezgi: kimlik seçicileri, sonra sınıf/nitelik/sözde sınıf seçicileri, sonra tür seçicileri. Bunu “kimlik yüz puan, sınıf on puan” diye onluk toplama oyununa çevirmeyelim; sütunlar öncelik sırasıyla karşılaştırılır. Çok sayıda tür seçicisi eklemek bir kimlik seçicisini yenmenin genel yöntemi değildir. Ayrıca özgüllük kaskadın tamamının yerine geçmez; karşılaştırmaya ancak önceki aşamalar eşit olduğunda girer.²

Kalıtım başka bir soruyu cevaplar

.soru-karti {
  color: #172b4d;
  font-family: sans-serif;
  border: 1px solid #9aa8bd;
}

Burada ilk iki özellik, kartın içindeki metinlere kalıtım yoluyla aktarılabilir. Kalıtım (inheritance), bazı özelliklerin değerinin ebeveynden çocuğa geçmesidir; her özelliğin geçmesi değildir. Son satır kartın kenarlığını çizer, içerideki her paragrafın etrafına aynı kenarlığı kendiliğinden koymaz. Girdi ve düğme gibi denetimlerin tarayıcıdan gelen kendi stilleri de olabilir; ortak yazı karakteri istiyorsak onlara açıkça font: inherit verebiliriz. Bu, “her çocuk otomatik aynı olur” beklentisini bırakıp hangi özelliğin nereden geldiğini okumaktır.²

Bölüm 21.5'te sınıflar arası kalıtım gördün; aynı Türkçe kelime burada başka bağlamda kullanılıyor. CSS'te ebeveynin yazı rengini almak, JavaScript sınıfından yeni sınıf türetmek değildir. Benzerlik “bir şeyi devralma” fikriyle sınırlıdır. Yine hangi kattaki sözleşmeyi okuduğumuzu belirliyoruz.

24.3 Kutu modeli: margin, border, padding, content

Tarayıcı yerleşim yaparken yalnızca “başlık” ve “şık” anlamlarıyla değil, bunların oluşturduğu kutuların boyutlarıyla çalışır. Kutu modeli (box model), içerik ile onun etrafındaki katmanları ayırır. İçerik (content) alanında yazı veya görsel bulunur; iç boşluk (padding) içerikle kenarlık arasındadır; kenarlık (border) kutuyu sarar; dış boşluk (margin) kutunun dışındadır. Bir şıkkın yazısı kenara yapışıyorsa iç boşluğa; iki şık birbirine yapışıyorsa aralarındaki boşluğa bakarız.³

.soru-karti {
  width: 320px;
  padding: 16px;
  border: 2px solid #9aa8bd;
  margin: 12px;
}

İlk satırın açtığı kart kuralında width, varsayılan content-box hesabında içerik genişliğidir. padding: 16px dört tarafta iç boşluk, border dört tarafta kalınlık–çizgi biçimi–renk belirler; margin ise dış boşluğu kurar. Son parantez kuralı bitirir. Bu sayılar bir cihaz ölçümü değil, birlikte hesaplayacağımız örnek girdilerdir.³

Hesabı Python ile doğruladık: 320 + 2 × 16 + 2 × 2 = 356; dış boşlukla 356 + 2 × 12 = 380. Aynı kurala box-sizing: border-box eklersek 320 artık kenarlık dahil genişliktir; içerik 320 − 2 × 16 − 2 × 2 = 284 olur. Margin yine bu genişliğin dışındadır. Tablo yalnızca yatay boyut hesabıdır; dikey dış boşlukların bazı durumlarda birleşmesi gibi ayrıntıları bu hesaba taşımıyoruz.³

*, *::before, *::after {
  box-sizing: border-box;
}

Bu küçük kuralda * bütün öğeleri, ::before ve ::after ise CSS'in oluşturabildiği sözde öğeleri hedefler; bu örnekte içerik üretmiyoruz, yalnızca aynı boyut hesabını onlar için de seçiyoruz. İçteki satır her hedefe border-box uygular. Böylece kartın genişliğini belirlerken iç boşluğun dışarı eklenmesi sürprizini azaltırız. Bu, kenarlığı veya iç boşluğu yok etmek değil, genişlik hesabının sınırını değiştirmektir.³

HTML'deki her kutu aynı akış davranışını taşımaz: blok kutuları ve satır içi kutuları ayırırız. Paragrafın yeni satırdan başlaması ile cümle içindeki span'in satırı sürdürmesi buna tanıdık örnektir. display, kutunun dışarıyla ve çocuklarıyla yerleşim ilişkisini değiştirir. “Her öğeye genişlik verince aynı davranır” varsayımı bu yüzden işlemez; şimdi kutuların birlikte nasıl yerleştiğine geçiyoruz.³

24.4 Yerleşim: flexbox, grid ve konumlandırma

Yerleşim (layout), kutuların ne kadar alan kapladığı ve birbirlerine göre nerede durduğudur. Hiç özel düzen seçmediğinde de bir normal akış (normal flow) vardır; blok içerikler sırayla yerleşir, metin satırlara akar. Yeni araçları bu akışın üstünde düşünmek önemli: her şeyi koordinat vererek tek tek yerine çivilemek zorunda değiliz.³⁶

Flexbox: bir ana eksen boyunca paylaşmak

.istatistikler {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

Esnek kutu yerleşimi (flexbox), bir satır veya sütun eksenindeki öğeleri düzenlemek için uygundur. Kuraldaki display: flex kapsayıcıyı esnek düzen yapar; doğrudan çocukları esnek öğe olur. Örneğin istatistiklerin her birini ayrı span'e alırsak üç çocuk birlikte düzenlenebilir. flex-wrap: wrap yer kalmayınca yeni satıra geçmeye izin verir. align-items çapraz eksende ortalar; varsayılan satır yönünde bu genellikle düşey hizadır. justify-content ana eksendeki kalan alanı öğeler arasına paylaştırır; gap öğeler arasında boşluk kurar. Parantezler bu ortak yerleşim tarifini sınırlar.⁴

“Ana eksen yataydır” diye ezberleme; flex-direction: column ile ana ekseni sütun yönüne çevirirsen hizalama özelliklerinin baktığı yönler de değişir. Flexbox satıra sarılabilir; “tek boyutlu” denmesi yalnızca tek satır yapabildiği anlamına gelmez. Yeni satırların kendi alan paylaşımını yapması, iki yönde birlikte hizalanmış bir ızgaradan farkıdır.⁴⁸

Grid: satır ve sütunları birlikte kurmak

.siklar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

Izgara yerleşimi (grid), satır ve sütunları birlikte düzenler. display bu kapsayıcıdaki düzeni seçer. repeat(2, …) iki sütun tarifini tekrar eder; minmax(0, 1fr) sütunun alt sınırını sıfır, üst sınırdaki paylaşımını kullanılabilir alandan bir pay yapar. fr, boşluklar gibi diğer ihtiyaçlar ayrıldıktan sonra paylaşılabilen alanın oranıdır. Son satır iki yöndeki aralıkları belirler. Uzun içerik yine taşabilir; sıfır alt sınır metnin sihirli biçimde her durumda sığması değildir.⁵

Bu örnekte kartın içindeki istatistik satırı flexbox, şıklar grid olabilir. Biri diğerinin eski sürümü veya evrensel yerine geçeni değil; farklı ilişki tarifleridir. Öğeler tek eksende esnesin istiyorsan flexbox, sütunlar satırlar boyunca hizalansın istiyorsan grid iyi bir düşünme başlangıcıdır. Kaynak HTML'deki okuma sırasını sırf görsel yerleşim için anlamsızlaştırmamak da önceki bölümden taşıdığımız tasarım şartıdır.⁴⁵⁸

Konumlandırma: kartı kurmak ile rozet yerleştirmek aynı iş değil

Konumlandırma (positioning), bir kutunun akışa ve kapsayıcısına göre nasıl yer alacağını yönetir. static normal başlangıçtır. relative, kutunun normal yerini koruyarak görsel konumunu kaydırabilir. absolute normal akıştan çıkar; diğer öğeler onun için yer ayırmaz. Basit örneğimizde position: relative verilmiş bir kart, içindeki mutlak konumlu rozet için konumlandırma dayanağı olabilir. Gerçek kapsayıcıyı başka özellikler de etkileyebilir; “her zaman en yakın div” kuralı yoktur.⁶

.soru-karti { position: relative; }
.rozet { position: absolute; top: 0.5rem; right: 0.5rem; }

İlk satır kartta konumlandırma bağlamı oluşturur. İkinci satır rozeti akıştan çıkarıp üst ve sağ kenardan belirtilen uzaklığa koyar. Bu, küçük bir rozet için öğretici olabilir; kartın bütün metnini, şıklarını ve düğmesini böyle yerleştirirsek uzun soru geldiğinde üst üste binme riski doğar. fixed basit durumda görünüm alanına göre sabitlenir; sticky akıştaki yerini koruyup kaydırma sınırlarında yapışabilir. Bunları ana yerleşim motoru yerine belirli ihtiyaçların araçları olarak düşün.⁶

24.5 Duyarlı tasarım, medya sorgusu, önce mobil

Duyarlı tasarım (responsive design), aynı içeriğin farklı kullanılabilir alanlara uyum sağlamasıdır. Bu, telefonda bütün sayfayı küçültmek veya her telefon modeli için ayrı dosya tutmak değildir. Esnek boyutlar, uygun yerleşim ve gerektiğinde koşullu kurallar birlikte kullanılır. Görünüm alanı (viewport), sayfanın görüntülendiği alandır; pencereyi daraltınca da değişebilir. Dolayısıyla genişliği cihaz markasının vekili saymak yerine içerik için bir koşul olarak okuyacağız.⁷

.calisma {
  width: 100%;
  max-width: 48rem;
  margin-inline: auto;
  padding: 1rem;
}
.siklar { display: grid; gap: 1rem; }
@media (min-width: 40rem) {
  .siklar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

İlk blokta genişlik kapsayıcı alanına göre belirlenir, max-width aşırı uzamayı sınırlar. margin-inline: auto satır yönündeki dış boşlukları otomatik paylaştırır; bu örnekte geniş alanda ortalama amacıyla kullanılır. İç boşluk kartı pencere kenarından ayırır; 24.3'teki border-box ayarını koruyoruz. İkinci kural grid ve aralık kurar; sütun tarifi olmadığı başlangıç düzenini tek sütun olarak kullanırız. Son blok, bir medya sorgusudur (media query): görünüm alanı en az 40rem olduğunda şıklar iki sütuna geçer. Kapanış parantezlerinden biri içteki kuralı, diğeri koşullu bloğu bitirir.⁵⁷⁸

Önce mobil (mobile-first) yaklaşımında bu örnekteki gibi dar alanın işleyen düzeninden başlarız; daha fazla alan varsa ek düzen açarız. 40rem evrensel telefon sınırı değildir; örnekte seçilmiş bir kırılma noktasıdır. En uzun soru metnini ve en uzun şıkkı koyup pencereyi daralt; iki sütunun rahatsız etmeye başladığı yerde kararını değerlendir. Yalnızca boş bir kartın güzel görünmesi yeterli değildir. web.dev'in yerleşim dersi de bazı düzenlerin medya sorgusu olmadan, grid ve flexbox'ın esnek kurallarıyla uyarlanabileceğini gösterir.⁸

Belgede <meta name="viewport" content="width=device-width, initial-scale=1"> satırını tutmamızın sebebi şimdi görünür: mobil tarayıcının geniş bir masaüstü sayfası varsayıp onu küçültmesi yerine, düzeni cihazın görünüm alanına göre kurmasını istiyoruz. Bu satır şıkları otomatik iki sütun yapmaz; CSS kuralına doğru ölçekte çalışma zemini sağlar. Kullanıcının yakınlaştırmasını kapatmayı örneğin bir parçası yapmıyoruz.⁷

24.6 CSS değişkenleri ve tasarım sistemi fikri

Bir kartta ana yazı rengi, düğmede ana renk, şıklarda kenarlık ve her yerde benzer boşluklar kullanmaya başladın. Aynı değeri birçok yere kopyalarsan küçük bir tasarım kararı pek çok bildirime dağılır. CSS değişkenleri (custom properties), bu değerlere ad verip yeniden kullanmamızı sağlar. Bunlar JavaScript değişkenleri değildir; CSS kaskadı içinde yaşayan özel özelliklerdir. İki tireyle tanımlanan biçimleri varsayılan olarak kalıtılır.⁹

:root {
  --renk-metin: #172b4d;
  --renk-ana: #174ea6;
  --bosluk: 1rem;
  --kose: 0.75rem;
}
.soru-karti {
  color: var(--renk-metin);
  padding: var(--bosluk);
  border-radius: var(--kose);
}
button {
  background-color: var(--renk-ana);
  color: white;
  font: inherit;
}
button:focus-visible {
  outline: 3px solid #9c2f00;
  outline-offset: 3px;
}

:root belgenin kök öğesini seçer; ilk blok dört ortak değer tanımlar. var(…), adı verilen özel özelliğin değerini kullanır. Kart bloğunda sırasıyla yazı rengi, iç boşluk ve yuvarlatılmış köşe yarıçapı bu adlardan gelir. Düğme bloğu ana arka planı, beyaz yazıyı ve ebeveynden alınacak yazı stilini seçer. Son blok, görünür odak gerektiğinde dış çizgi ile onun uzaklığını verir. Odak göstergesini tamamen silmek yerine görünür bir alternatif tanımlıyoruz; renklerin her içerik ve durum için uygunluğunu bu birkaç satır tek başına kanıtlamaz.⁹¹¹

Tasarım sistemi (design system) fikrini burada küçük ölçekte kullanıyoruz: renk, boşluk, yazı ve bileşen davranışları için ortak, tutarlı kararlar. Yalnızca birkaç -- adı yazmak tamamlanmış bir tasarım sistemi değildir. Fakat “bütün kartlarda aynı boşluk, bütün eylemlerde aynı odak davranışı” kararı artık tekil tesadüflerden çıkar. Bu paragraf, özel özelliklerle değer tekrarını azaltma imkânından hareketle kendi prototipimiz için kurduğumuz tasarım önerisidir.⁹

Bu bölümde neler kuruldu

CSS kuralları seçicilerle DOM’u hedefler, özellik–değer bildirimleri sunumu tarif eder. Kaskad çatışmayı çözer; özgüllük onun bir aşaması, kalıtım ise bazı değerlerin ebeveynden gelmesidir. Kutu modeli boyutu, flexbox ve grid kutular arası ilişkiyi, medya sorguları koşullu düzeni kurar. Özel özellikler ortak tasarım değerlerini adlandırır.

Terimler sözlükte, Bölüm 24 başlığı altında. İkinci anlatım için CS50’nin yazılı Hafta 8 notlarındaki ilgili HTML/CSS/JavaScript bölümleri de bu iş bölümünü örnekler.¹²

Kaynaklar

1. MDN · What is CSS?.
2. MDN · Handling conflicts.
3. MDN · The box model.
4. MDN · Flexbox.
5. MDN · CSS grid layout.
6. MDN · Positioning.
7. web.dev · Introduction to responsive design.
8. web.dev · Macro layouts.
9. MDN · Using CSS custom properties.
10. MDN · CSS values and units.
11. MDN · :focus-visible.
12. CS50 · Lecture 8 notes, CSS başlığı.