Görüntüleme Türleri

Önceki iki derste kutuların ölçüleri hesaplandı ama kutunun ne tür bir kutu olduğu sorulmadı. Bir paragraf neden kendi satırını kaplar da içindeki vurgu ögesi metnin akışında kalır? İkisine de width: 200px yazıldığında neden yalnızca biri değişir?

Fark display özelliğinden gelir. Bu ders üç temel türü — blok, satır içi ve satır içi blok — dört ölçüt üzerinden karşılaştırır ve gizlemenin ayrı bir mesele olduğunu gösterir.

Üç Tür, Dört Ölçüt

// goruntuleme.mjs — display degerinin hangi ozellikleri etkilediğini cizelgeler
const TURLER = {
  "block":        { satirKaplar: true,  widthUygulanir: true,  dikeyBosluk: true,  aralikDuyarli: false },
  "inline":       { satirKaplar: false, widthUygulanir: false, dikeyBosluk: false, aralikDuyarli: true  },
  "inline-block": { satirKaplar: false, widthUygulanir: true,  dikeyBosluk: true,  aralikDuyarli: true  },
  "none":         { satirKaplar: false, widthUygulanir: false, dikeyBosluk: false, aralikDuyarli: false },
};

const basliklar = ["display", "kendi satiri", "width/height", "dikey margin", "bosluga duyarli"];
console.log(basliklar.map((b, i) => b.padEnd(i === 0 ? 14 : 16)).join(""));
for (const [ad, o] of Object.entries(TURLER)) {
  const e = (v) => (v ? "evet" : "hayir").padEnd(16);
  console.log(ad.padEnd(14) + e(o.satirKaplar) + e(o.widthUygulanir) + e(o.dikeyBosluk) + e(o.aralikDuyarli));
}

// satir ici kutularin yan yana dizilmesi: aradaki bosluk karakteri de bir kutudur
console.log("\n--- satir ici dizilim (bosluk karakteri dahil) ---");
const parcalar = [
  { tur: "inline-block", en: 80 }, { tur: "bosluk", en: 4 },
  { tur: "inline-block", en: 80 }, { tur: "bosluk", en: 4 },
  { tur: "inline-block", en: 80 },
];
let x = 0;
for (const p of parcalar) { console.log(`${String(x).padStart(4)} .. ${x + p.en}  ${p.tur}`); x += p.en; }
console.log(`toplam satir eni: ${x}  (kutular: ${80 * 3}, bosluklar: ${x - 240})`);

display       kendi satiri    width/height    dikey margin    bosluga duyarli 
block         evet            evet            evet            hayir           
inline        hayir           hayir           hayir           evet            
inline-block  hayir           evet            evet            evet            
none          hayir           hayir           hayir           hayir           

--- satir ici dizilim (bosluk karakteri dahil) ---
   0 .. 80  inline-block
  80 .. 84  bosluk
  84 .. 164  inline-block
 164 .. 168  bosluk
 168 .. 248  inline-block
toplam satir eni: 248  (kutular: 240, bosluklar: 8)

Çizelge, önceki dersteki soruların yanıtını veriyor.

Blok kutu (block box) kapsayan kutunun satır içi eksenini baştan sona doldurur ve kendinden sonrakini alt satıra iter. width ve height uygulanır; dört kenardaki dış boşluk da uygulanır. Paragraf, başlık, bölüm ve liste bu türdendir.

Satır içi kutu (inline box) metnin akışında kalır ve yalnızca içeriği kadar yer kaplar. width ve height bildirimlerinin hiçbir etkisi yoktur; kutunun ölçüsü içeriğinden gelir. Dikey dış boşluk da yok sayılır. Vurgu, bağlantı, kısaltma ve genel amaçlı span bu türdendir.

Bir uyarı gerekir: satır içi kutuda yatay iç boşluk ve kenarlık uygulanır ama çizilen alan satır yüksekliğini büyütmez. Bir bağlantıya dikey iç boşluk verildiğinde renkli alan büyür, satırlar arasındaki mesafe değişmez ve alanlar üst üste binebilir.

Satır içi blok kutu (inline-block box) ikisinin arasındadır: dışarıdan satır içi gibi davranır — kendi satırını kaplamaz, komşularıyla yan yana durur — ama içeriden bir blok kutudur; width, height ve dört kenar dış boşluğu uygulanır.

Satır İçi Dizilimde Boşluk Karakteri Sayılır

Çıktının ikinci bölümü sık karşılaşılan bir sorunu gösteriyor. Üç adet 80 birimlik satır içi blok kutu yan yana konduğunda toplam satır eni 240 değil 248 çıktı. Aradaki 8 birim, kaynak metinde kutuların arasındaki boşluk karakterlerinden gelir.

Sebep, satır içi düzenin metin düzeni olmasıdır. Kaynak metindeki satır sonları ve boşluklar birer boşluk karakterine indirgenir ve bu karakter de yer kaplar. Genişliği yazı tipine bağlıdır; buradaki 4 birim örnek bir değerdir.

Sonuç, üç kutuya width: 33.333% verildiğinde bir satıra sığmamalarıdır — boşluklar eklenince toplam yüzde yüzü aşar. Bu, satır içi blok ile ızgara benzeri düzenler kurmanın kırılgan yanıdır ve bir sonraki kurstaki düzen sistemlerinde ortadan kalkar; o modellerde kutular arasındaki metin düğümleri yerleşime katılmaz.

Dış ve İç Görüntüleme Türü

display özelliği tek bir şey değil, iki şey birden söyler.

Dış görüntüleme türü (outer display type) kutunun kapsayıcısında nasıl davranacağını belirler: block ya da inline.

İç görüntüleme türü (inner display type) kutunun çocuklarını nasıl dizeceğini belirler: flow, flow-root, flex, grid, table.

İki değerli yazımda ikisi ayrı ayrı verilir:

.gezinme { display: block flex; }

Tek değerli eski yazımlar bu ikilinin kısaltmalarıdır: block sözcüğü block flow, inline-block sözcüğü inline flow-root, flex sözcüğü block flex anlamına gelir. Bu ayrım, inline-block türünün neden “içeriden blok, dışarıdan satır içi” diye tarif edildiğini açıklar — sözcük gerçekten iki parçadan oluşur.

flow-root değeri ayrıca anılmalıdır: kutuyu, çocuklarının akışını kendi içinde tamamlayan bağımsız bir kök yapar. Bunun ne işe yaradığını kayan öğeler dersinde göreceğiz.

Türü Değiştirmek Anlamı Değiştirmez

Bir ögenin görüntüleme türü tarayıcının varsayılan biçem dosyasından gelir ve bir bildirimle değiştirilebilir. li { display: inline; } yazmak liste maddelerini yan yana dizer.

Değişen yalnızca yerleşimdir. Belgedeki anlam — bunun bir liste maddesi olduğu — yerinde kalır ve belge ağacını okuyan programlar onu görmeye devam eder. Bu, Web’in Temelleri ve HTML kursunda kurulan yapı–sunum ayrımının doğrudan sonucudur: bir başlığı satır içi yapmak onu başlık olmaktan çıkarmaz.

Tersi de doğrudur ve bir uyarı içerir: bir ögeyi görsel olarak başka bir şeye benzetmek onu o şey yapmaz. Bir div ögesine düğme görünümü vermek, klavyeyle odaklanabilir ve etkinleştirilebilir bir düğme üretmez. Görünüm biçemin, davranış ve anlam işaretlemenin işidir.

Gizlemenin Üç Yolu

display: none çizelgede dördüncü satırdaydı ve bütün ölçütlerde “hayır” veriyordu. Bunun sebebi, bu değerin kutu üretmemesidir. Öge belge ağacında durur ama yerleşime hiç katılmaz.

Üç ayrı gizleme yolu vardır ve sonuçları farklıdır:

Yazım	Kutu üretir mi	Yer kaplar mı	Yardımcı teknolojiye görünür mü
display: none	Hayır	Hayır	Hayır
visibility: hidden	Evet	Evet	Hayır
opacity: 0	Evet	Evet	Evet

Üçüncü satır dikkat ister: saydamlığı sıfırlanmış bir öge görünmez ama hâlâ oradadır — odaklanabilir, tıklanabilir ve ekran okuyucuya okunur. Bir şeyi kullanıcıdan gizlemek için opacity: 0 yazmak, onu erişilebilirlik ağacından kaldırmaz.

Dördüncü bir durum daha vardır: bir metni görsel olarak gizleyip yardımcı teknolojiye bırakmak. Bu, display: none ile yapılamaz; ögeyi bir piksellik bir alana kırpan bir kural grubuyla yapılır ve genellikle .gorsel-gizli gibi bir yardımcı sınıfla adlandırılır.

İstasyon Sayfasında Türler

/* istasyon.css — 10. adım: görüntüleme türleri */
.gezinme li { display: inline-block; margin-inline-end: 12px; }

.olcum-cizelgesi caption { display: table-caption; text-align: start; }

.durum-rozeti {
  display: inline-block;
  padding-block: 2px;
  padding-inline: 8px;
  border-radius: 4px;
}

.gorsel-gizli {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.durum-rozeti sınıfı satır içi blok olarak tanımlandı çünkü iki şeyi birden istiyor: metnin akışında kalmak ve dikey iç boşluk alabilmek. Satır içi olsaydı iç boşluk çizilir ama satır yüksekliğini büyütmezdi; blok olsaydı kendi satırına inerdi.

.gorsel-gizli sınıfı yukarıdaki dördüncü durumu gerçekleştirir: kutu üretilir, bir piksellik bir alana kırpılır ve erişilebilirlik ağacında kalır. Ölçüm çizelgesinde birimleri görsel olarak sütun başlığında bir kez yazıp her hücrede yardımcı teknolojiye tekrarlamak için kullanılır.

Özet

• Blok kutu kapsayanının satır içi eksenini doldurur ve kendi satırını kaplar; width, height ve dört kenar dış boşluğu uygulanır.
• Satır içi kutu metnin akışında kalır; width, height ve dikey dış boşluk uygulanmaz, yatay iç boşluk ve kenarlık çizilir ama satır yüksekliğini büyütmez.
• Satır içi blok kutu dışarıdan satır içi, içeriden bloktur; yan yana dizilir ama ölçü ve boşluk bildirimlerini alır.
• Satır içi dizilimde kaynak metindeki boşluk karakterleri de yer kaplar; bu, yan yana dizilen kutuların toplamının beklenenden geniş çıkmasının sebebidir.
• Gizlemenin üç yolu farklı sonuç verir: display: none kutu üretmez, visibility: hidden yer kaplar, opacity: 0 ise erişilebilirlik ağacında kalır ve etkileşime açıktır.

Sonraki Adım

Bu ders kutuların türünü tanımladı ama nasıl dizildiklerini ayrıntısıyla anlatmadı. Blok kutular neden yukarıdan aşağı yığılır, satır içi kutular hangi kurala göre satırlara bölünür, iki blok kutu arasındaki dış boşluk neden ikisinin toplamı değildir? Sonraki ders normal akışın kurallarını tanımlar ve dış boşluk çökmesini sayıyla hesaplar.