CSS Display Özelliği
Display, bir HTML öğesinin sayfadaki "davranış
kimliğini" belirleyen en temel
yapıdır.
Bu özellik, öğenin bir kutu gibi tüm satırı mı kaplayacağını (Block), yoksa metin
gibi satırın
içinde mi akacağını (Inline) kontrol eder.
Sayfa düzeninin DNA'sını oluşturan Display, öğelerin görünürlüğünü ve birbirleriyle
olan etkileşim
modelini tanımlar.
Temel Akış Modelleri (Display) Blok, Satır İçi ve Hibrit Yapılar
display özelliği, bir HTML öğesinin sayfadaki "varoluş biçimini" tanımlar.
Tarayıcıya şu soruyu sorar: "Bu öğe bir paragraf gibi yeni bir satır mı başlatmalı, yoksa bir kelime gibi satırın içinde mi akmalı?"
Flexbox ve Grid gibi modern sistemler gelmeden önce, tüm web düzenleri bu temel değerlerin stratejik kombinasyonuyla kurulurdu.
Kutular ve Akışın Mantığı HTML elementleri doğuştan bir karaktere sahiptir. Örneğin bir <div> alan kaplamayı severken, bir <span> akışa uymayı sever.
display özelliği, bu varsayılan karakteri değiştirmenize olanak tanır.
Bu özellik sayesinde, öğelerin boyutlarını (genişlik/yükseklik) kabul edip etmeyeceğini ve komşu öğelerle yan yana gelip gelmeyeceğini
tek bir satır kodla yönetebilirsiniz.
Yok Oluş: Display Nonedisplay: none, öğeyi sadece gizlemez, onu sayfadan tamamen siler.
Öğe DOM'da kalır ancak görsel ağaçtan çıkarılır.
Kapladığı alan yok olur ve diğer öğeler o boşluğu doldurur.
(Bu yönüyle, sadece görünmez yapan ama yer kaplayan
visibility: hidden'dan keskin bir şekilde ayrılır ).
Kısa Özet: display özelliği, bir öğenin satır davranışını ( yeni satır mı , aynı satır mı ) ve kutu özelliklerini ( boyut alabilir mi , alamaz mı ) belirler.
display özelliğini anlamadan, bir web sayfasında öğeleri doğru hizalamak, yan yana getirmek veya düzenli bir yapı kurmak
neredeyse imkansızdır.
Modern düzen sistemleri olan flex ve grid bile, temelde display özelliği ile aktif hale gelir.
Bu nedenle display: none, sadece görsel bir gizleme değil, aynı zamanda layout seviyesinde bir kaldırmadır.
Bu temel davranışlar üç ana kategoriye ayrılır: block, inline ve inline-block.
Blok Düzen (display: block) Sayfanın İskeleti ve Yapı Taşları
Blok düzeyindeki öğeler, web sayfasının bencil yapı taşlarıdır.
Varsayılan olarak, ebeveynlerinin sunduğu tüm genişliği ( width: 100% ) sonuna kadar kullanırlar.
İçerikleri sadece 5 piksellik bir nokta bile olsa, blok öğe sağa ve sola doğru uzayarak satırın geri kalanını işgal eder ve kimseyi yanına yaklaştırmaz.
Akış Davranışı: Yeni Satır Kuralı Blok öğelerin en belirgin özelliği, kendiliğinden satır başı yapmalarıdır.
HTML kodunda yan yana yazsanız bile, tarayıcıda her biri bir alt satıra düşer.
Tıpkı bir kitaptaki paragraflar gibi yukarıdan aşağıya doğru bir dikey ritim oluştururlar.
Not: İki blok öğeyi yan yana getirmek için standart akış yeterli değildir; flex veya grid gibi modern düzenleme sistemlerine ihtiyaç duyarsınız.
Tam Boyut Kontrolü (Kutu Modeli)Blok öğeler, CSS Kutu Modeli'nin tüm özelliklerini eksiksiz destekler.
width, height, padding ve özellikle dikey margin (top/bottom) değerleri mükemmel şekilde işler.
Özellikle margin: 0 auto; tekniği ile yatayda ortalanabilen yegane öğe türü (flex/grid harici) blok öğelerdir.
Semantik Mimari ve Örnekler Sayfanın ana bölümlerini oluşturmak için kullanılırlar.
Temel Örnekler: <div> (genel kutu), <p> (paragraf), <h1-h6> (başlıklar).
Yapısal Örnekler: <section>, <header>, <footer>, <ul> (liste).
Gizli Davranış: Margin ÇakışmasıBlok öğelerde dikey margin değerleri her zaman beklediğiniz gibi çalışmaz.
İki blok öğe üst üste geldiğinde, margin değerleri toplanmak yerine çakışır ve tek bir margin gibi davranır.
Bu durum, özellikle boşlukların neden beklenenden farklı göründüğünü anlamakta kritik rol oynar.
Bu nedenle blok öğeler genellikle sayfa düzeninin ana iskeletini oluşturmak için kullanılır. Header, içerik alanı ve footer gibi yapılar çoğunlukla blok öğelerden oluşur.
Ancak modern CSS'te, yan yana düzenler oluşturmak için blok yapılar tek başına yeterli değildir. Bu tür senaryolarda flex ve grid gibi sistemler tercih edilir.
Blok öğeler, tam genişlik kaplaması ve satır başı davranışı sayesinde, sayfa bölümlerini ayırmak ve dikey akış oluşturmak için idealdir.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Display Block Örneği</title>
</head>
<body>
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Block Layout Demo</title>
<link rel="stylesheet" href="style.css?v=1.0.150">
</head>
<body>
<header class="box header">
Header (display: block)
</header>
<main class="box content">
<h1>İçerik Alanı</h1>
<p>Bu bir paragraf örneğidir. Blok öğeler tüm satırı kaplar.</p>
<p>Bu da başka bir paragraf. Dikkat et: otomatik alt satıra geçer.</p>
</main>
<section class="box section">
Section Alanı
</section>
<footer class="box footer">
Footer
</footer>
</body>
</html>
</body>
</html>/* Genel reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Sayfa stili */
body {
font-family: Arial, sans-serif;
background: #f4f6f8;
padding: 20px;
}
/* Ortak blok kutu stili */
.box {
width: 100%;
/* Tam genişlik */
padding: 20px;
margin-bottom: 20px;
/* Dikey boşluk */
border-radius: 10px;
color: white;
}
/* Bölümler */
.header {
background: #2d3436;
}
.content {
background: #0984e3;
}
.section {
background: #6c5ce7;
}
.footer {
background: #00b894;
}
/* Paragraflar */
p {
margin-top: 10px;
/* margin collapse gözlemleyebilirsin */
}<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Başlık</title>
</head>
<body>
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blok Düzen - display: block Örneği</title>
<link rel="stylesheet" href="style.css?v=1.0.150">
</head>
<body>
<div class="ornek-alani">
<!-- 1. TEMEL BLOK DAVRANIŞI: Alt alta dizilim -->
<div class="bolum baslik-bolum">
<h2>📐 1. Blok Öğeler Alt Alta Dizilir</h2>
<p>Blok öğeler, HTML içerisinde yan yana yazılsalar bile <strong>her biri yeni bir satırdan başlar</strong>.</p>
</div>
<div class="blok-demo">
<div class="blok-kutu">Blok Kutu 1</div>
<div class="blok-kutu">Blok Kutu 2</div>
<div class="blok-kutu">Blok Kutu 3</div>
<div class="not">
<small>✨ Üç kutu da <code>display: block</code> olduğu için <strong>alt alta</strong> görünüyor. Yan yana değil!</small>
</div>
</div>
<!-- 2. TAM GENİŞLİK ÖZELLİĞİ -->
<div class="bolum genislik-bolum">
<h2>📏 2. Blok Öğeler Tam Genişlik Kaplar</h2>
<p>Varsayılan olarak, bir blok öğe <strong>ebeveyninin tüm genişliğini (%100) kullanır</strong>.</p>
</div>
<div class="genislik-demo">
<div class="dar-kutu">width: 300px verilmiş</div>
<div class="tam-kutu">width verilmemiş (tam genişlik)</div>
<div class="not">
<small>✨ İlk kutuya <code>width: 300px</code> verildiği için daraldı. İkinci kutu ise varsayılan davranışla <strong>tam genişlik kaplar</strong>.</small>
</div>
</div>
<!-- 3. MARGIN ÇAKIŞMASI (COLLAPSE) -->
<div class="bolum margin-bolum">
<h2>🔄 3. Bloklarda Dikey Margin Çakışması (Margin Collapse)</h2>
<p>İki blok öğe üst üste geldiğinde, margin'ler <strong>toplanmaz, birleşir (çakışır)</strong>.</p>
</div>
<div class="margin-demo">
<div class="margin-kutu ust">Üst Kutu (margin-bottom: 30px)</div>
<div class="margin-kutu alt">Alt Kutu (margin-top: 20px)</div>
<div class="not">
<small>✨ Beklenti: 30px + 20px = <strong>50px boşluk</strong>.<br>
🔍 Gerçek: margin değerleri çakışır ve <strong>sadece 30px boşluk</strong> oluşur (büyük olan kazanır).</small>
</div>
</div>
<!-- 4. YATAYDA ORTALAMA (margin: 0 auto) -->
<div class="bolum ortalama-bolum">
<h2>🎯 4. Blok Öğeler Yatayda Ortalanabilir</h2>
<p><code>margin: 0 auto</code> tekniği <strong>sadece blok öğelerde</strong> çalışır. Inline öğelerde
çalışmaz!</p>
</div>
<div class="ortalama-demo">
<div class="ortalanmis-kutu">
Bu kutu yatayda ortalanmış
</div>
<div class="not">
<small>✨ <code>margin: 0 auto</code> ve belirli bir <code>width</code> ile blok öğe <strong>tam ortalanır</strong>.</small>
</div>
</div>
<!-- 5. BOYUT KONTROLÜ: width, height, padding, margin -->
<div class="bolum boyut-bolum">
<h2>📦 5. Blok Öğeler Kutu Modelini Tam Destekler</h2>
<p><code>width</code>, <code>height</code>, <code>padding</code>, <code>margin</code> ve
<code>border</code>
<strong>tamamen çalışır</strong>.
</p>
</div>
<div class="boyut-demo">
<div class="kutu-modeli-ornegi">
<div class="icerik">İçerik</div>
</div>
<div class="not">
<small>✨ width: 200px, height: 80px, padding: 15px, margin: 10px, border: 3px solid — <strong>hepsi çalışır</strong>.</small>
</div>
</div>
</div>
</body>
</html>
</body>
</html>/* RESET (minimal) */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 40px 20px;
}
/* Ana örnek alanı */
.ornek-alani {
max-width: 900px;
margin: 0 auto;
}
/* Bölüm başlıkları */
.bolum {
background: rgba(255, 255, 255, 0.95);
border-radius: 12px;
padding: 20px 25px;
margin-bottom: 25px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.bolum h2 {
color: #2c3e50;
font-size: 1.4rem;
margin-bottom: 12px;
border-left: 5px solid #3498db;
padding-left: 15px;
}
.bolum p {
color: #555;
line-height: 1.6;
}
.bolum code {
background: #ecf0f1;
padding: 3px 8px;
border-radius: 5px;
font-family: 'Courier New', monospace;
font-size: 0.9rem;
color: #e74c3c;
}
/* ============ BLOK KUTULAR (display: block) ============ */
.blok-kutu {
display: block;
/* Bu zaten varsayılan, ama açıkça belirtelim */
background: #3498db;
color: white;
padding: 15px 20px;
margin-bottom: 10px;
border-radius: 8px;
font-weight: bold;
text-align: center;
}
/* ============ GENİŞLİK DEMO ============ */
.genislik-demo,
.blok-demo,
.margin-demo,
.ortalama-demo,
.boyut-demo {
background: white;
border-radius: 12px;
padding: 20px;
margin-bottom: 25px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.dar-kutu {
display: block;
width: 300px;
/* Belirli genişlik */
background: #e74c3c;
color: white;
padding: 15px;
margin-bottom: 10px;
border-radius: 8px;
text-align: center;
}
.tam-kutu {
display: block;
/* width verilmedi → tam genişlik */
background: #2ecc71;
color: white;
padding: 15px;
border-radius: 8px;
text-align: center;
}
/* ============ MARGIN ÇAKIŞMASI DEMO ============ */
.margin-kutu {
background: #f39c12;
color: white;
padding: 15px;
text-align: center;
border-radius: 8px;
}
.ust {
margin-bottom: 30px;
/* Alt boşluk 30px */
background: #e67e22;
}
.alt {
margin-top: 20px;
/* Üst boşluk 20px */
background: #f1c40f;
color: #333;
}
/* ============ YATAYDA ORTALAMA ============ */
.ortalanmis-kutu {
display: block;
width: 250px;
margin: 0 auto;
/* SADECE block öğelerde çalışır! */
background: #9b59b6;
color: white;
padding: 15px;
text-align: center;
border-radius: 8px;
}
/* ============ KUTU MODELİ TAM DESTEK ============ */
.kutu-modeli-ornegi {
display: block;
width: 200px;
height: 80px;
padding: 15px;
margin: 10px;
border: 3px solid #3498db;
background: #ecf0f1;
text-align: center;
line-height: 40px;
border-radius: 8px;
}
.kutu-modeli-ornegi .icerik {
background: #3498db;
color: white;
padding: 5px;
border-radius: 5px;
}
/* ============ NOTLAR (açıklama kutuları) ============ */
.not {
margin-top: 15px;
padding: 12px;
background: #f8f9fa;
border-left: 4px solid #3498db;
border-radius: 6px;
font-size: 0.85rem;
color: #2c3e50;
}
.not code {
background: #e9ecef;
padding: 2px 6px;
border-radius: 4px;
font-family: monospace;
}
/* Responsive */
@media (max-width: 600px) {
body {
padding: 20px 15px;
}
.bolum h2 {
font-size: 1.2rem;
}
.dar-kutu {
width: 100%;
}
}Satır İçi Düzen (display: inline) Metin Akışı ve Boyut Kısıtlamaları
Satır içi öğeler, yapısal bloklar değil, metin akışının kelimeleri gibidir.
Asla yeni bir satır başlatmazlar, eğer sağ tarafta yeterli boşluk varsa, diğer öğelerle yan yana dizilirler.
Satır dolduğunda ise otomatik olarak aşağıya (bir sonraki satıra) kıvrılırlar, ancak kendilerinden önce veya sonra zorla bir kırılma (<br>) yaratmazlar.
Boyutlandırma İnadı (Width & Height) Inline öğelerin en kritik teknik özelliği "Boyutlandırılamaz" olmalarıdır.
Bir <span> etiketine width: 500px veya height: 100px verseniz bile, tarayıcı bu komutları tamamen yoksayar.
Öğenin genişliği ve yüksekliği, sadece ve sadece içeriği kadar ( yazının uzunluğu ve font boyutu ) olur. İçerik biterse, öğe de biter.
Dikey Boşluk İllüzyonu (Padding & Margin)Yatay eksende margin ve padding mükemmel çalışır ve komşu öğeleri iter.
Ancak dikey eksende işler değişir:
1. Dikey Margin: Tamamen etkisizdir, uygulanmaz.
2. Dikey Padding: Görsel olarak Padding: Görsel olarak uygulanır ancak fiziksel alan kaplamaz.
Bu durum, padding alanının üstteki veya alttaki satırların üzerine binmesine ve metnin okunmaz hale gelmesine neden olabilir.
Kullanım Amacı ve Örnekler Akışı bozmadan metin içi vurgulamalar yapmak için kullanılır.
Örnekler: <a>, <span>, <strong>, <em>.
Beklenmeyen Davranış: Kontrol KaybıSatır içi öğeler üzerinde kontrol sınırlıdır. Genişlik ve yükseklik verememek, onları düzen kurmak için uygunsuz hale getirir.
Bu nedenle inline öğeler, layout oluşturmak için değil, sadece metin içi kullanım için tasarlanmıştır.
Modern CSS'te, inline öğeler ile düzen kurmaya çalışmak yerine, flex ve grid gibi sistemler kullanılmalıdır.
Eğer bir öğenin hem satır içinde kalmasını hem de boyutlandırılabilmesini istiyorsanız, inline-block kullanmanız gerekir.
Inline öğelerle çalışırken, özellikle dikey padding kullanımında metinlerin üst üste binmesi gibi beklenmeyen görsel sorunlar ortaya çıkabilir.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blok Düzen (display: block) Giriş Örneği</title>
<link rel="stylesheet" href="style.css?v=1.0.150">
</head>
<body>
<div class="blok-konteyner">
<div class="blok-kutu">Kutu 1 (Blok)</div>
<div class="blok-kutu">Kutu 2 (Blok)</div>
</div>
</body>
</html>.blok-kutu {
display: block;
background-color: #3498db;
color: white;
padding: 15px;
margin-bottom: 10px;
border-radius: 4px;
font-family: sans-serif;
width: 200px;
}<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Inline Layout Demo</title>
<link rel="stylesheet" href="style.css?v=1.0.150">
</head>
<body>
<div class="ornek-alani">
<!-- 1. AKIŞ DAVRANIŞI -->
<div class="bolum">
<h2>🧵 1. Inline Öğeler Akışa Dahildir</h2>
<p>
Bu bir metin içinde
<span class="inline-kutu">inline kutu</span>
ve
<span class="inline-kutu">bir diğeri</span>
yer alır. Hepsi yan yana akar.
</p>
</div>
<!-- 2. WIDTH / HEIGHT ÇALIŞMAZ -->
<div class="bolum">
<h2>📏 2. Width & Height Çalışmaz</h2>
<span class="boyut-deneme">
width: 200px verilmiş ama çalışmaz
</span>
</div>
<!-- 3. PADDING & MARGIN DAVRANIŞI -->
<div class="bolum">
<h2>⚠️ 3. Dikey Padding ve Margin Sorunu</h2>
<p>
Normal metin
<span class="padding-problem">
padding uygulanmış inline
</span>
devam eden metin...
</p>
</div>
<!-- 4. INLINE VS INLINE-BLOCK -->
<div class="bolum">
<h2>🔄 4. Inline vs Inline-Block</h2>
<span class="inline">inline</span>
<span class="inline-block">inline-block</span>
</div>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background: #0f172a;
color: white;
padding: 40px 20px;
}
.ornek-alani {
max-width: 800px;
margin: 0 auto;
}
.bolum {
background: #1e293b;
padding: 20px;
border-radius: 12px;
margin-bottom: 20px;
}
h2 {
margin-bottom: 10px;
}
/* INLINE AKIŞ */
.inline-kutu {
background: #22c55e;
padding: 5px 10px;
border-radius: 6px;
}
/* WIDTH / HEIGHT ÇALIŞMAZ */
.boyut-deneme {
display: inline;
width: 200px;
height: 120px;
background: #ef4444;
padding: 10px;
}
/* PADDING PROBLEM */
.padding-problem {
background: #f59e0b;
padding: 10px 0;
/* dikey padding */
}
/* INLINE vs INLINE-BLOCK */
.inline {
background: #3b82f6;
padding: 10px;
margin-right: 10px;
}
.inline-block {
display: inline-block;
width: 120px;
height: 60px;
background: #a855f7;
text-align: center;
line-height: 60px;
}
Hibrit Düzen (display: inline-block) Satır İçi Akışta Blok Yetenekleri
display: inline-block, CSS'in sunduğu en pratik uzlaşma noktasıdır.
Bu öğeler, dışarıya karşı Inline , içeriye karşı ise Block davranışı sergilerler.
Tıpkı bir kelime gibi satırda akarlar, ancak bir kutu gibi genişlik ve yükseklik sahibi olabilirler.
Tam Boyut ve Kutu Modeli Desteği Inline öğelerin aksine, inline-block öğelere verdiğiniz width, height, margin ve padding değerleri eksiksiz çalışır.
Bu özellik, onları yan yana dizilmesi gereken menü öğeleri, ürün kartları veya buton grupları için mükemmel bir seçenek yapar.
Kritik Sorun: Hayalet Boşluk (Whitespace)Inline-block kullanırken geliştiricilerin en sık karşılaştığı "Bug" şudur: Öğeler arasında istenmeyen 4px'lik bir boşluk oluşur.
Bunun sebebi, öğelerin "inline" karakteridir, HTML kodunda alt alta yazdığınız etiketler arasındaki "Enter" karakterini, tarayıcı bir boşluk karakteri olarak algılar ve ekrana basar.
Çözüm: HTML etiketlerini bitişik yazmak veya ebeveyne font-size: 0 verip çocuklarda fontu tekrar açmaktır.
Dikey Hizalama (Vertical Align) Blok öğeler sadece üstten/alttan margin ile hizalanırken, inline-block öğeler vertical-align özelliğine yanıt verir.
Yan yana duran farklı yükseklikteki kutuları tabandan (baseline), ortadan (middle) veya tepeden (top) hizalayabilirsiniz.
Modern Yaklaşım: Neden Artık Tercih Edilmiyor?inline-block, geçmişte yan yana dizilim için sıkça kullanılsa da, modern CSS'te bu rolü büyük ölçüde flex ve grid sistemleri devralmıştır.
Bunun sebebi, inline-block yapısının hizalama, boşluk kontrolü ve esneklik konularında sınırlı ve öngörülemez davranışlar sergilemesidir.
Buna rağmen, inline-block hâlâ küçük ölçekli bileşenlerde, özellikle metinle birlikte hizalanması gereken butonlar veya ikonlar için kullanılabilir.
Alternatif olarak, boşluk sorununu çözmek için HTML etiketlerini yorum satırıyla ayırmak veya ebeveyn elementte letter-spacing ve
word-spacing gibi teknikler de kullanılabilir.
Inline öğeler sadece içerik kadar yer kaplarken, inline-block öğeler geliştiricinin kontrolüne girer ve sabit boyutlu kutular oluşturulmasına olanak tanır.
Ancak karmaşık düzenler oluşturmak için inline-block kullanmak, bakım maliyetini artırır ve beklenmeyen hizalama sorunlarına yol açabilir.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hibrit Düzen (display: inline-block) Giriş Örneği</title>
<link rel="stylesheet" href="style.css?v=1.0.150">
</head>
<body>
<div class="menu-alani">
<div class="hibrit-kutu">Ürün 1</div>
<div class="hibrit-kutu">Ürün 2</div>
<div class="hibrit-kutu">Ürün 3</div>
</div>
</body>
</html>.hibrit-kutu {
display: inline-block;
width: 100px;
height: 60px;
background-color: #2ecc71;
color: white;
text-align: center;
line-height: 60px;
margin: 5px;
border-radius: 8px;
font-family: sans-serif;
vertical-align: middle;
}<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Inline-Block Demo</title>
<link rel="stylesheet" href="style.css?v=1.0.150">
</head>
<body>
<div class="container">
<!-- 1. INLINE-BLOCK AKIŞ -->
<h2>🧩 1. Inline-Block ile Yan Yana Kartlar</h2>
<div class="kart-alani">
<div class="kart">Kart 1</div>
<div class="kart">Kart 2</div>
<div class="kart">Kart 3</div>
</div>
<!-- 2. WHITESPACE SORUNU -->
<h2>👻 2. Whitespace Problemi</h2>
<div class="kart-alani bosluk-problem">
<div class="kart">A</div>
<div class="kart">B</div>
</div>
<!-- 3. WHITESPACE ÇÖZÜMÜ -->
<h2>🛠️ 3. Whitespace Çözümü (font-size: 0)</h2>
<div class="kart-alani cozum">
<div class="kart">A</div>
<div class="kart">B</div>
</div>
<!-- 4. VERTICAL ALIGN -->
<h2>📐 4. Vertical Align</h2>
<div class="hizalama-alani">
<div class="kutu small">Kısa</div>
<div class="kutu tall">Uzun Kutu</div>
<div class="kutu medium">Orta</div>
</div>
</div>
</body>
</html>* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background: #111827;
color: white;
padding: 40px 20px;
}
.container {
max-width: 900px;
margin: 0 auto;
}
h2 {
margin: 25px 0 10px;
}
/* ===== KARTLAR ===== */
.kart-alani {
background: #1f2937;
padding: 15px;
border-radius: 10px;
}
.kart {
display: inline-block;
width: 120px;
height: 80px;
background: #3b82f6;
margin: 5px;
text-align: center;
line-height: 80px;
border-radius: 8px;
font-weight: bold;
}
/* ===== WHITESPACE PROBLEM ===== */
.bosluk-problem .kart {
background: #ef4444;
}
/* ===== WHITESPACE ÇÖZÜM ===== */
.cozum {
font-size: 0;
}
.cozum .kart {
font-size: 16px;
background: #22c55e;
margin: 0;
}
/* ===== VERTICAL ALIGN ===== */
.hizalama-alani {
background: #1f2937;
padding: 15px;
border-radius: 10px;
}
.kutu {
display: inline-block;
width: 100px;
margin-right: 10px;
background: #8b5cf6;
text-align: center;
border-radius: 8px;
vertical-align: middle;
}
.small {
height: 40px;
line-height: 40px;
}
.medium {
height: 70px;
line-height: 70px;
}
.tall {
height: 100px;
line-height: 100px;
}İleri Düzey Düzen Mimarisi Görünmeyeni Yönetmek: Bağlamlar ve Hesaplamalar
CSS düzeni, sadece "display: block" veya "flex" yazmaktan ibaret değildir; bu sadece yüzeydeki komuttur.
Öğelerin boyutlandırılması, tam olarak nerede duracağı ve kimin kimin üstüne bineceği, tarayıcının arka planda yönettiği karmaşık ve
soyut kurallar bütününe dayanır.
Bir web sayfası oluşturulurken, tarayıcı sadece kutuları yan yana dizmez; her kutu için bir "Yerleşim Ortamı" hesaplar.
Biçimlendirme Bağlamları (Formatting Contexts) CSS'de her şey bir bağlam içinde gerçekleşir.
Tarayıcı, bazı öğeleri özel birer karantina bölgesi gibi izole eder.
Bu bölgelere teknik olarak Biçimlendirme Bağlamı denir.
Örneğin: Bir öğeye "float" uyguladığınızda veya "overflow: hidden" verdiğinizde, aslında o kutunun içindeki fizik kurallarını değiştirmiş ve onu dış dünyadan ayıran yeni bir oyun alanı yaratmış olursunuz.
Koordinat ve Katman Yönetimiİleri düzey düzende, öğeler sadece X ve Y ekseninde değil, Z ekseninde de yani derinlik ekseninde de yarışırlar.
Bir öğenin ebeveyniyle olan ilişkisi ve kardeşleriyle olan derinlik savaşı, kusursuz bir arayüz ile kırık bir tasarım arasındaki farkı belirler.
Bu bölümde, CSS'in bu "görünmez motorunun" nasıl çalıştığını ve onu nasıl manipüle edebileceğimizi inceleyeceğiz.
Neden Bu Sistem Var? CSS'te düzen kurmak sadece kutuları hizalamak değildir; tarayıcı her öğe için bir hesaplama sistemi çalıştırır.
Bu sistem; öğelerin nerede duracağını, neye göre boyutlanacağını ve hangi katmanda yer alacağını belirleyen birden fazla bağlamın
birlikte çalışmasıyla oluşur.
Bu bağlamları anlamadan yapılan düzenler genellikle tesadüfi çalışır ve küçük bir değişiklikte kolayca bozulur.
Containing Block (Kapsayıcı Blok) Kavramı Koordinatların Sıfır Noktası ve Referans Kutusu
Kapsayıcı Blok, bir HTML öğesinin boyutunu ve konumunu ( özellikle piksel cinsinden koordinatlarını ) hesaplamak için kullanılan referans kutusudur.
CSS dünyasında hiçbir öğe boşlukta yüzmez; her öğe, kendisini çevreleyen ve ona sınır çizen bir Kapsayıcı Blok'a göre konumlandırılır ve boyutlandırılır.
İşlev 1: Boyutlandırma (Yüzde Hesabı) Bir öğeye yüzde (%) ile width veya height değeri verdiğinizde, tarayıcı şu soruyu sorar:
"Neyin yüzdesi?"
Cevap Kapsayıcı Blok'tur, öğenin genişliği, içinde bulunduğu Kapsayıcı Bloğun genişliğine göre hesaplanır.
İşlev 2: Mutlak Konumlandırma (Absolute) position: absolute; olarak ayarlanmış bir öğenin top, left, right, bottom değerleri, ebeveynine göre değil, Kapsayıcı Bloğuna göre hesaplanır.
Bu senaryoda Kapsayıcı Blok, en yakın konumu ayarlanmış (non-static) atasıdır (ebeveyni veya daha yukarıdaki büyükbabası).
İşte bu "konumu ayarlanmış ata", o absolute öğenin Kapsayıcı Bloğu haline gelir ve koordinat sistemini belirler.
Temel Kural ve İstisnalar Bir öğenin Kapsayıcı Bloğu genellikle en yakın <div> veya <body> etiketi gibi blok düzeyindeki ebeveynidir (Static ve Relative durumlarda).
Ancak bu durum, öğenin kendi position değerine göre (Absolute veya Fixed olması durumunda) karmaşıklaşır ve referans noktası değişir.
Beklenmeyen Davranış: Referans KaymasıBir öğe position: absolute olduğunda, geliştiriciler çoğu zaman onun ebeveynine göre konumlanacağını varsayar.
Ancak eğer ebeveyn öğe position değeri static ise, tarayıcı daha yukarıdaki bir atayı referans alır ve bu durum öğenin
beklenmeyen bir yerde görünmesine neden olur.
Bu yüzden bir öğeyi kontrol etmek için, referans alınacak kapsayıcıyı bilinçli olarak position: relative yapmak kritik bir adımdır.
Stacking Context (Katmanlama Bağlamı) ile İlişkisi Derinlik Hiyerarşisi ve Z-Ekseni Yönetimi
Stacking Context, web sayfasının Z eksenindeki üç boyutlu sıralamasını yöneten, tarayıcının oluşturduğu bir katman hiyerarşisidir.
Normal akışta öğeler sırayla çizilirken, Stacking Context içinde öğeler, bu bağlamın kurallarına göre üst üste bindirilir.
Z-index Kontrolü: Yerel Kapsam (Local Scope) Bir öğe yeni bir Stacking Context oluşturduğunda, o öğenin içindeki tüm alt öğeler, yalnızca o bağlam içinde z-index ile sıralanabilir.
Bu, CSS'in en önemli kuralını doğurur: Bir bağlamın içindeki alt öğe, z-index değeri ne olursa olsun, o bağlamın dışındaki
( ebeveyninin kardeşi olan ) öğelerin önüne veya arkasına keyfi olarak geçemez.
Alt öğeler kendi liglerinde yarışır, ebeveynler ise üst ligde yarışır.
Oluşum Nedenleri (Tetikleyiciler)Yeni bir Stacking Context, sadece z-index ile değil, aşağıdaki durumlarla da tetiklenir:
- position: relative veya absolute ile birlikte "auto" olmayan bir z-index değeri atandığında.
- opacity değeri 1'den küçük olduğunda (şeffaflık yeni bir katman gerektirir).
- transform, filter veya perspective özellikleri kullanıldığında.
Kritik Önemi ve Kullanım Alanları Bu kavramı anlamak; karmaşık arayüzlerde hayati öneme sahiptir.
Özellikle açılır menülerin , modal pencerelerin veya üstte kalan sabit başlıkların, sayfanın diğer öğeleri tarafından yanlışlıkla kapatılmamasını ( veya tam tersi yanlışlıkla üstte kalmamasını ) sağlamak için Stacking Context hiyerarşisi doğru kurulmalıdır.
Kritik Problem: Z-index Neden Çalışmaz?Geliştiricilerin en sık karşılaştığı sorunlardan biri, yüksek bir z-index değerine rağmen öğenin üstte görünmemesidir.
Bunun nedeni, öğenin farklı bir Stacking Context içinde bulunmasıdır.
Bir öğe kendi bağlamı içinde ne kadar yüksek z-index alırsa alsın, ebeveyn bağlamının sınırlarını aşamaz.
Bu durum, özellikle modal, dropdown ve tooltip gibi bileşenlerde "neden üstte çıkmıyor?" probleminin temel sebebidir.
BFC (Blok Biçimlendirme Bağlamı) İzole Düzen ve Akış Kontrolü
BFC (Block Formatting Context), blok düzeyindeki kutuların sayfada nasıl konumlandırılacağını belirleyen, HTML akışının özel bir parçasıdır.
Tarayıcı, bir BFC oluşturduğunda, aslında o bölgeyi bir karantina alanı veya "kapsül" ilan eder.
Bu bağlamın en önemli kuralı İzolasyondur: BFC içindeki olaylar dışarıyı etkilemez; dışarıdaki olaylar da içeriyi etkilemez.
Nasıl Oluşturulur? (Tetikleyiciler) Bir element, belirli CSS koşulları sağlandığında otomatik olarak BFC üretir:
- overflow özelliği "visible" dışında bir değere ( hidden, auto, scroll ) ayarlandığında. ( En yaygın ve pratik yöntemdir ).
- position özelliği "absolute" veya "fixed" olduğunda.
- display özelliği "flex", "grid" veya "inline-block" olduğunda.
- float özelliği "none" dışında bir değere ayarlandığında.
Normal akışta, bir ebeveyn içindeki tüm çocuklar "float" edilirse, ebeveynin yüksekliği sıfıra iner (çöker) çünkü uçan çocuklarını göremez.
Ancak ebeveyni BFC yaparsanız (örneğin overflow: hidden vererek), ebeveyn artık sınırları içindeki her şeyi, float edilenleri bile hesaba katmak zorundadır.
Bu, eski usül "clearfix" hack'lerine modern bir alternatiftir.
Süper Güç 2: Margin Çakışmasını Durdurmak Normalde dikey marginler ebeveyn ile çocuk arasında çakışır ve birleşir.
Ancak bir BFC, dış dünyadan izole olduğu için, içindeki çocuğun margin'inin dışarıya taşmasına ve ebeveynin margin'i ile birleşmesine izin vermez ve sınırları netleştirir.
Gerçek Dünya Problemi: Layout Neden Kırılır?CSS'te bazı durumlarda öğeler beklenmedik şekilde üst üste biner veya ebeveyn kutu çöker.
Bunun en yaygın nedeni, float kullanılan öğelerin normal akıştan çıkması ve ebeveynin bu öğeleri hesaba katmamasıdır.
Bir BFC oluşturulduğunda ise tarayıcı, bu alanı izole eder ve içindeki tüm öğeleri yeniden hesaplamak zorunda kalır.
Bu sayede hem float taşmaları engellenir hem de margin çakışmaları kontrol altına alınır, böylece kırık layoutlar stabil hale getirilir.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>İleri CSS Kavramları</title>
<link rel="stylesheet" href="style.css?v=1.0.150">
</head>
<body>
<div class="container">
<!-- 1. CONTAINING BLOCK -->
<section class="bolum">
<h2>📐 Containing Block (Referans Kutusu)</h2>
<div class="parent">
parent (position: relative)
<div class="child">
absolute child
</div>
</div>
<p class="aciklama">
Bu kutu <code>position: absolute</code> olduğu için konumunu parent'a göre alır.
</p>
</section>
<!-- 2. STACKING CONTEXT -->
<section class="bolum">
<h2>🧱 Stacking Context (Katmanlama)</h2>
<div class="stack-parent">
<div class="box red">z-index: 1</div>
<div class="box blue">z-index: 999</div>
</div>
<p class="aciklama">
Yüksek z-index her zaman kazanmaz. Aynı bağlam içinde çalışır.
</p>
</section>
<!-- 3. BFC -->
<section class="bolum">
<h2>🧩 BFC (Blok Biçimlendirme Bağlamı)</h2>
<div class="bfc-parent">
<div class="float-box">float</div>
</div>
<p class="aciklama">
overflow verilmezse parent çöker. BFC ile kapsanır.
</p>
</section>
</div>
</body>
</html>
/* RESET */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* GENEL */
body {
font-family: Arial, sans-serif;
background: #0f172a;
color: white;
padding: 40px 20px;
}
.container {
max-width: 800px;
margin: auto;
}
.bolum {
margin-bottom: 40px;
}
h2 {
margin-bottom: 15px;
}
/* ===== 1. CONTAINING BLOCK ===== */
.parent {
position: relative;
height: 120px;
background: #1e293b;
margin-bottom: 10px;
padding: 10px;
}
.child {
position: absolute;
top: 10px;
right: 10px;
background: #22c55e;
padding: 10px;
}
/* ===== 2. STACKING CONTEXT ===== */
.stack-parent {
position: relative;
height: 120px;
background: #1e293b;
}
.box {
position: absolute;
width: 100px;
height: 100px;
top: 10px;
}
.red {
background: red;
left: 10px;
z-index: 1;
}
.blue {
background: blue;
left: 40px;
z-index: 999;
}
/* ===== 3. BFC ===== */
.bfc-parent {
background: #1e293b;
margin-top: 10px;
padding: 10px;
overflow: hidden; /* BFC */
}
.float-box {
float: left;
width: 100px;
height: 100px;
background: orange;
}
/* ===== AÇIKLAMA ===== */
.aciklama {
font-size: 14px;
margin-top: 10px;
color: #94a3b8;
}Display Özelliğinin Evrimi CSS1'den Modern Layout Sistemlerine Yolculuk
display özelliği, bir HTML öğesinin kimlik kartıdır.
Web düzeninin en temel taşıdır çünkü tarayıcıya sadece öğenin görünüp görünmeyeceğini değil, hangi fizik kurallarına göre hareket edeceğini söyler.
Bu özellik değiştiğinde, öğenin sadece görseli değil, tüm huyu suyu, genişliği, yüksekliği ve komşularıyla ilişkisi kökten değişir.
Tarihsel Sancı: Tablolar ve Float'lar CSS1 ve CSS2 döneminde, "display" özelliği sınırlıydı ( sadece block, inline ve table ).
Geliştiriciler, yan yana düzenler oluşturmak için "float" gibi aslında metin kaydırmak için üretilmiş özellikleri hack olarak kullanmak zorundaydı.
Bu dönem, "clearfix" temizlikleriyle ve kırılan düzenlerle geçen kaotik bir inşaat süreciydi.
Modern Devrim: Flexbox ve GridCSS3 ile birlikte "display" özelliği sadece bir durumu değil, koca bir sistemi tetiklemeye başladı.
display: flex ve display: grid değerleri, öğeyi sadece bir kutu olmaktan çıkarıp, içindeki çocukları yöneten akıllı bir konteyner (kapsayıcı) haline getirdi.
Artık "display", öğenin sadece kendi duruşunu değil, içindeki çocukların dizilimini de yöneten bir orkestra şefi rolünü üstlendi.
Teknik Detay: İç ve Dış Görünüm (Inner vs Outer) Modern CSS spesifikasyonunda "display" aslında iki rolü aynı anda oynar:
Dış Rol (Outer Display): Öğenin kendisinin ebeveyn akışında nasıl duracağı.
İç Rol (Inner Display): Öğenin kendi çocuklarını nasıl dizeceği.
Örneğin: "display: flex" dediğimizde, öğe dışarıya karşı "block" gibi davranırken, içeriye karşı "flex" kurallarını uygular.
Bugünden Bakış: Neden Hâlâ Önemli?Bu tarihsel süreç sadece geçmişi anlatmaz; modern CSS'in neden bu şekilde tasarlandığını anlamamızı sağlar.
Flexbox ve Grid gibi sistemler, geçmişte yaşanan bu sınırlamaların ve hack'lerin doğrudan bir sonucudur.
Bu nedenle eski yaklaşımları anlamak, modern layout sistemlerinin neden bu kadar güçlü ve gerekli olduğunu kavramak için kritik öneme sahiptir.
CSS1'den CSS3'e Display Özelliğinin Evrimi Tablolardan Modern Düzene Geçiş Sancısı
CSS1'in yayımlanmasıyla birlikte, düzenin temel taşları olan block ve inline değerleri hayatımıza girdi.
O dönemde web düzeni, büyük ölçüde HTML <table> etiketlerine bağımlıydı. Sayfalar, görünmez tablolar içine hapsedilmiş hücrelerden oluşuyordu.
CSS'in nihai amacı, sunum ile içeriği (HTML) ayırmak ve bu hantal tablo bağımlılığını sonlandırmaktı.
Erken Dönem Sorunu: İkili Seçim Geliştiricilerin elinde sadece iki seçenek vardı: Ya alt alta ya da yan yana.
Bu durum, basit bir yatay menü yapmayı bile işkenceye dönüştürüyordu.
Çünkü inline öğeler yan yana gelse de, dikey boşluk ve boyutlandırma komutlarını reddediyordu.
1998: Inline-Block Devrimi (CSS2)CSS2 ile birlikte tanıtılan inline-block, gerçek bir kurtarıcı oldu.
Bu hibrit değer, öğelere "Yan yana dizilin ama bir kutu gibi boyutlanın" yeteneğini verdi.
Karmaşık yatay menüler ve ızgara benzeri kart yapıları ilk kez standart bir yolla yapılabilir hale geldi ve flexbox öncesi dönemin en popüler aracıydı.
CSS2.1: Float Dönemi ve Hack Kültürü float özelliği, aslında sadece metni bir resmin etrafına sarmak için tasarlanmıştı.
Ancak geliştiriciler, bunu amaç dışı kullanarak tüm sayfa düzenlerini float ile yapmaya başladılar.
Bu dönem, "Clearfix" gibi temizlik kodlarıyla ve düzen kaymalarıyla mücadele edilen, web tasarımın vahşi batısıydı.
Tarayıcı Uyumluluk Tarihçesi ve Zorluklar Kaos Dönemi ve Standartlaşma Savaşı
CSS1 ve CSS2'nin ilk yılları, web dünyasının Vahşi Batısı gibiydi.
Internet Explorer ve Netscape gibi tarayıcı devleri, W3C standartlarını uygulamak yerine kendi kurallarını dayatıyorlardı.
Aynı CSS kodu, farklı tarayıcılarda bambaşka sonuçlar veriyordu.
Bu dönem, geliştiriciler için tam bir Babil Kulesi sendromuydu; kimse aynı dili konuşmuyordu.
Meşhur IE Box Model Hatası Bu dönemin en ünlü "böceği", Internet Explorer'ın kutu modelini yanlış yorumlamasıydı.
Standartlara göre width sadece içeriği kapsamalıyken, IE bu genişliğe border ve padding'i de dahil ediyordu.
Bu durum, bir tarayıcıda mükemmel görünen kutunun, diğerinde içeri çökmesine veya taşmasına neden oluyordu.
Deneysel Dönem: Vendor Prefixes (Önekler)CSS3 ile gelen Flexbox ve Grid gibi devrimsel özellikler ilk çıktığında "deneysel" statüsündeydi.
Tarayıcılar bu özellikleri kullanabilmemiz için bize özel laboratuvar etiketleri (Vendor Prefixes) sundu:
-webkit- (Chrome/Safari), -moz-, -ms- (Internet Explorer).
Basit bir yuvarlak köşe (border-radius) için bile 4-5 satır aynı kodu tekrar tekrar yazmak zorundaydık.
Olgunlaşma ve Hacks Kültürü Modern standartlar oturana kadar, "inline-block" ve "float" temelli düzenleri ayakta tutmak için geliştiriciler Hacks kullanmak zorundaydı.
"Clearfix" gibi efsanevi yamalar veya sadece IE'nin görebildiği özel karakterler ("*zoom: 1"), bu dönemin hayatta kalma araçlarıydı.
Bugün modern tarayıcılar (Evergreen Browsers) standartları otomatik güncellediği için bu karanlık günler büyük ölçüde geride kalmıştır.
Dikkat
Flex ve Grid gibi ileri seviye display konuları ayrı dosyalarda işlenmiştir.
Modern Layout Sistemlerine Geçiş Flexbox ve Grid Devrimi
CSS3'ün modüler gelişim süreci, sadece yeni özellikler eklemekle kalmadı, display özelliğine iki devrim niteliğinde yeni değer ekleyerek düzenleme mantığını tamamen değiştirdi.
Artık öğeleri yerleştirmek için yan yollara sapmak zorunda değiliz; tarayıcılar artık doğrudan "düzenleme" için tasarlanmış özel motorlara sahiptir.
Display: flex ( Esnek Kutu Düzeni ) Flexbox, web tasarımındaki en yaygın ihtiyaç olan tek boyutlu düzenlemeler için tasarlanmıştır.
Tek boyut kavramı şudur: Öğeleri ya sadece yatayda ( satır ) ya da sadece dikeyde (sütun ) dizersiniz.
Bir boncuk dizisi gibi düşünün; ipin yönü bellidir.
Flexbox, geçmişin sancılı yöntemi olan inline-block'un yan yana yerleştirme amacını devraldı. Ancak bunu yaparken, geliştiricilerin kâbusu olan
margin çakışması, kontrolsüz boşluklar ve özellikle dikey hizalama zorlukları gibi tüm sorunları ortadan kaldırdı.
Günümüzde bir navigasyon menüsü, bir ürün kartının iç yapısı veya bir buton grubu tasarlarken, öğelerin arasındaki boşlukları ve sırayı dinamik olarak yönetmenin standart yolu haline gelmiştir.
Ancak inline-block, boşluk problemleri ve hizalama zorlukları nedeniyle büyük ölçekli projelerde her zaman güvenilir bir çözüm olamadı.
Display: grid (Izgara Düzeni) Grid Layout, CSS'in en güçlü silahıdır ve iki boyutlu (2D) düzenlemeler için tasarlanmıştır.
Flexbox'ın aksine, Grid hem satırı hem de sütunu aynı anda yönetir.
Bu, bir satranç tahtası gibi hem X hem de Y ekseninde tam kontrol sağlar.
Bu sistem, bir sayfanın ana iskeletini, karmaşık hizalamaları ve hatta üst üste binen bölgeleri tanımlamayı mümkün kılar.
Grid'in gelişiyle birlikte, sayfa düzeni oluşturmak için float ve eski display yöntemlerine olan bağımlılık tamamen sona erdi ve artık hack yok, sadece mimari var.
Float ile kurulan layoutlar, içerik değiştiğinde kolayca kırılabilir ve bakım maliyeti yüksek yapılar oluştururdu.
Karar Noktası: Ne Zaman Hangisi?Eğer düzen tek bir eksende (sadece yatay veya sadece dikey) ilerliyorsa, flex kullanmak en doğru yaklaşımdır.
Ancak hem satır hem sütun kontrolü gerekiyorsa, grid çok daha güçlü ve ölçeklenebilir bir çözüm sunar.
Basit bileşenler için Flexbox, sayfa iskeleti ve karmaşık düzenler için Grid tercih edilmelidir.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modern Sisteme Giriş: display: flex Yapısı Giriş Örneği</title>
<link rel="stylesheet" href="style.css?v=1.0.150">
</head>
<body>
<div class="esnek-kapsayici">
<div class="kucuk-kutu">F</div>
<div class="kucuk-kutu">L</div>
<div class="kucuk-kutu">E</div>
<div class="kucuk-kutu">X</div>
</div>
</body>
</html>.esnek-kapsayici {
display: flex;
justify-content: center;
gap: 10px;
background-color: #ecf0f1;
padding: 20px;
border-radius: 10px;
}
.kucuk-kutu {
width: 40px;
height: 40px;
background-color: #9b59b6;
color: white;
text-align: center;
line-height: 40px;
font-weight: bold;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modern Sisteme Giriş: display: grid Yapısı Giriş Örneği</title>
<link rel="stylesheet" href="style.css?v=1.0.150">
</head>
<body>
<div class="izgara-alani">
<div class="hucre">1</div>
<div class="hucre">2</div>
<div class="hucre">3</div>
<div class="hucre">4</div>
</div>
</body>
</html>.izgara-alani {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
max-width: 300px;
margin: 0 auto;
}
.hucre {
background-color: #34495e;
color: white;
padding: 20px;
text-align: center;
border-radius: 5px;
}Farklı Display Değerlerinin Render Performansı Hız, Akıcılık ve Tarayıcı Maliyeti
Öğenin display değerini değiştirmek, tarayıcının "Piksel Hattı" adı verilen üretim bandında alarm zillerinin çalmasına neden olur.
display: block veya inline-block gibi yapısal özellikleri değiştirmek, bir öğenin boyutunu veya akış pozisyonunu değiştirir.
Bu durum, tarayıcının tüm sayfadaki diğer öğelerin yerini sil baştan hesaplamasını gerektirir.
Buna teknik olarak "Reflow" veya Layout denir.
Özellikle display: none kullanıp sonra geri açmak, tam bir Reflow tetikler.
Büyük ve karmaşık sayfalarda bunu sık sık yapmak, işlemciyi yorar ve kullanıcıda "Jank" hissi yaratır.
Görünmezlik Stratejisi: Visibility vs DisplayPerformans açısından daha ucuz bir alternatif vardır: visibility: hidden.
Bu değer, öğeyi görsel olarak gizler (şeffaf yapar), ancak öğe düzen akışındaki yerini korur ( fiziksel olarak oradadır ).
Boyutu ve konumu değişmediği için, tarayıcı geometri hesabı yapmaz; sadece "Repaint" aşamasını tetikler.
Bu nedenle, çok sık açılıp kapanan (toggle edilen) menüler veya ipuçları için display: none yerine bu yöntemi kullanmak, animasyonların çok daha akıcı olmasını sağlar.
Modern Optimizasyon: content-visibilityCSS'in yeni nesil modülleri, performans için bize "akıllı tembellik" yapma imkanı sunar.
content-visibility: auto; komutu, tarayıcıya şu emri verir: "Bu öğe şu an ekranın dışındaysa, onu çizmeyle uğraşma, işlemi atla."
Kullanıcı sayfayı kaydırıp öğeye yaklaştığında tarayıcı onu anlık olarak çizer (Just-in-Time Rendering).
Bu özellik, özellikle sonsuz akışa sahip bloglar veya binlerce ürün içeren e-ticaret listelerinde ilk yükleme hızını dramatik bir şekilde artırır.
Reflow işlemleri küçük sayfalarda fark edilmezken, büyük ve dinamik arayüzlerde ciddi performans sorunlarına yol açabilir.
Özellikle animasyon sırasında display değiştirmek yerine, transform ve opacity kullanmak çok daha akıcı sonuçlar verir.
Erişilebilirlik ve Ekran Okuyucular Görünmeyeni Duyurmak: A11y Stratejileri
Görsel olarak gizlenen içeriğin ekran okuyucular tarafından nasıl işlendiği, sadece bir tasarım tercihi değil, kritik bir tasarım kararıdır.
display: none kullandığınızda, öğe sadece ekrandan değil, Erişilebilirlik Ağacı'ndan da tamamen sökülüp atılır.
Sonuç olarak, ekran okuyucu kullanan bir birey, o içeriğin varlığından asla haberdar olmaz.
Bu yöntem, dekoratif ikonlar veya o an kullanıcıyı ilgilendirmeyen bilgiler için doğru yöntemdir.
Görünmez Tehlike: visibility: hidden visibility: hidden kullanmak riskli bir alandır.
Öğeyi görsel olarak gizler ancak yerini korur.
Bazı eski teknoloji veya istisnai ekran okuyucular, bu "hayalet kutuyu" hala okumaya çalışabilir.
Bu durum, görme engelli bir kullanıcı için kafa karıştırıcıdır; "Burada bir buton var" sesini duyar ama klavye ile ona odaklanamaz veya etkileşime giremez.
Erişilebilirlik Dostu Gizleme (.sr-only) Bazen bir içeriği gözden gizleyip, sadece ekran okuyuculara fısıldamak istersiniz.
Sadece bir büyüteç ikonu olan "Ara" butonunun ne işe yaradığını, görme engelli bir kullanıcıya anlatmak gerekir.
Örneğin: Bu durumda display: none yasaktır , çözüm, .sr-only sınıfıdır.
Bu teknik, öğeyi silmez; onu position: absolute ve "width: 1px" gibi değerlerle 1 piksellik bir kutuya sıkıştırıp ekranın dışına iter , böylece içerik görsel olarak yok olur ama kodda yaşamaya devam eder.
Eğer içerik tamamen kaldırılmak isteniyorsa display: none, sadece görsel olarak gizlenmek isteniyorsa özel erişilebilirlik teknikleri tercih edilmelidir.
Klavye Navigasyonu ve Odak Yönetimi Tab Tuşu, Sekme Sırası ve Görünmez Engeller
Fare kullanamayan veya klavye ile gezen kullanıcılar için bir öğeye ulaşılabilir olması, o öğenin display durumuna göbekten bağlıdır.
display: none olarak ayarlanmış öğeler, HTML akışından ve Erişilebilirlik Ağacı'ndan çıkarıldığı için, klavyeyle gezinme sırasında Sekme Sırasına dahil edilmezler.
Bu durum, bir "Modal Pencere" veya "Form" gizlendiğinde istenen bir davranıştır; ancak yanlışlıkla gizlenen önemli bir buton, klavye kullanıcısı için yok hükmündedir.
Etkileşimli Bloklar ve Ulaşılabilirlik display: block veya inline-block değerlerine sahip butonlar, bağlantılar (<a>) ve form elemanları, varsayılan olarak klavye ile odaklanabilir durumdadır.
Bu öğeler görünür olduğu sürece, kullanıcı Tab tuşuna bastığında sırayla bu öğelerin üzerinde durabilir.
Görsel Odak (Focus Ring) ve Opacity Tuzağı Klavye ile gezinirken, kullanıcının "Şu an neredeyim?" sorusunun cevabı Odak Göstergesidir ( genellikle mavi bir dış çerçeve: :focus).
Eğer bir öğe display: none ise bu halka asla görünmez. Ancak bazen geliştiriciler, öğeyi gizlemek ama klavye sırasından çıkarmamak isterler.
Bu durumda opacity: 0 kullanılır. Öğe görünmez olur ama "oradadır".
Uyarı: Bu teknik dikkatli kullanılmalıdır. Eğer opacity: 0 olan bir butona Tab ile gelinirse, kullanıcı odak halkasını göremez ve "kaybolmuş" hissine kapılır (Odak boşlukta gibidir).
Görünmez ancak odaklanabilir öğeler, kullanıcı deneyimini ciddi şekilde bozar ve erişilebilirlik hatalarına neden olur.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Klavye Navigasyonu</title>
<link rel="stylesheet" href="style.css?v=1.0.150">
</head>
<body>
<div class="container">
<h2>⌨️ Tab ile gezinmeyi dene</h2>
<!-- Normal odaklanabilir öğeler -->
<a href="#">Link 1</a>
<button>Buton 1</button>
<!-- display:none → tamamen yok -->
<button class="hidden-display">Gizli (display:none)</button>
<!-- opacity:0 → görünmez ama odaklanabilir -->
<button class="hidden-opacity">Gizli (opacity:0)</button>
<a href="#">Link 2</a>
<button>Buton 2</button>
<p class="aciklama">
Tab tuşuna basarak ilerle:
<br><br>
❌ display:none → tamamen atlanır
⚠️ opacity:0 → odaklanılır ama görünmez (tehlikeli!)
</p>
</div>
</body>
</html>/* Genel */
body {
font-family: Arial, sans-serif;
background: #0f172a;
color: white;
padding: 40px;
}
.container {
max-width: 600px;
margin: auto;
}
/* Tüm odaklanabilir öğeler */
a, button {
display: inline-block;
margin: 10px 5px;
padding: 10px 15px;
background: #3b82f6;
color: white;
text-decoration: none;
border: none;
border-radius: 6px;
cursor: pointer;
}
/* Focus görünümü */
a:focus, button:focus {
outline: 3px solid yellow;
}
/* display:none → tamamen yok */
.hidden-display {
display: none;
}
/* opacity:0 → görünmez ama aktif */
.hidden-opacity {
opacity: 0;
}
/* açıklama */
.aciklama {
margin-top: 20px;
font-size: 14px;
color: #94a3b8;
}İleri Düzey Display Mekanizmaları Soyut Kutular ve Dahili Mimari
Bir web sayfasının görsel düzeni, basit block ve inline akışının çok ötesine geçer.
Arka planda, tarayıcının dahili mimarisini yöneten karmaşık ve soyut kurallar silsilesi çalışır.
Bu mekanizmalar, CSS'in varsayılan akışı yönetmek için kullandığı sanal kutu yapılarını ve nadiren kullanılan özel display değerlerinin (table, flow-root vb.) davranışlarını belirler.
Karmaşık Kurallar ve Referans NoktalarıBu ileri düzey kurallar üç temel sütun üzerine kuruludur:
- Kapsayıcı Referansları: Öğelerin boyut ve konum hesaplamalarını belirleyen görünmez sınırlar.
- Biçimlendirme Bağlamları (BFC): Öğelerin birbiriyle dikey olarak nasıl ilişki kuracağını ve birbirlerini nasıl itip çekeceğini kontrol eden izole bölgeler.
- Otomatik (Anonim) Kutular: Geliştiricinin doğrudan yazmadığı ama tarayıcının düzeni sağlamak için kendi kendine oluşturduğu isimsiz kutular.
Neden Öğrenmeliyiz? (Debugging) Bu kavramlar teorik gibi görünse de pratikte hayati öneme sahiptir.
Özellikle "Margin neden çöküyor?", "Bu kutu neden float'ı kapsamıyor?" gibi karmaşık düzenleme hatalarını (bug'ları) gidermek ve tahmin edilebilir, performanslı CSS kodları yazmak için bu mekanizmaları anlamak zorunludur.
Bu mekanizmalar genellikle doğrudan görülmez, ancak bir layout beklenmedik şekilde davrandığında arka planda çalışan bu kuralların bir sonucu olarak ortaya çıkar.
Bu nedenle bu yapıları anlamak, sadece bilgi değil, hataları hızlı teşhis edebilme yeteneği kazandırır.
Başlangıç Kapsayıcı Blok (ICB) Düzenin Sıfır Noktası ve Kök Referans
Initial Containing Block , tarayıcı penceresinin ( viewport ) boyutunu ve konumunu temsil eden en dıştaki, sanal kapsayıcıdır.
HTML akışındaki her şeyin nihai olarak boyutlandığı ve konumlandığı ana referans noktasıdır.
Bir web sayfasını, sonsuz bir boşluğa ( canvas ) çizilen resim gibi düşünürseniz, ICB bu resmin çerçevesidir.
İşlev 1: Kök Elementin Ebeveyni HTML hiyerarşisinin en tepesindeki <html> elementinin (root element) kendisi de bir yere göre konumlanmak zorundadır.
İşte <html> etiketinin Kapsayıcı Bloğu, bu soyut ICB'dir.
Sayfanın genel boyutlarını ( width/height: 100% ) bu referansa göre alır.
İşlev 2: Sabit Konumlandırma (Fixed) Referansı position: fixed; olarak ayarlanmış öğeler, HTML ağacındaki ebeveynlerini görmezden gelir ve doğrudan ICB'ye (yani tarayıcı penceresine) kilitlenir.
Sayfa içeriği ne kadar aşağı kaydırılırsa kaydırılsın, ICB yerinden oynamadığı için bu öğeler de ekranda çakılı kalır.
Genişlik ve Yükseklik Otoritesi ICB'nin genişliği ve yüksekliği, sayfa içeriği için mevcut olan başlangıçtaki görüntüleme alanını belirler.
Yüzde ( % ) bazlı tasarımlarda, eğer bir ebeveyn genişliği belirtilmemişse, zincirleme hesaplama en sonunda ICB'ye kadar ulaşır ve tarayıcı penceresinin genişliğini baz alır.
Özellikle position: fixed kullanılan bileşenlerde, öğenin neden beklenen kapsayıcıya değil de ekranın tamamına göre hizalandığını anlamak için ICB kavramı kritik rol oynar.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>ICB - Initial Containing Block Örneği</title>
<link rel="stylesheet" href="style.css?v=1.0.150">
</head>
<body>
<!-- ICB Bilgi Kartı - Kavram Açıklaması -->
<div class="icb-info">
<h1>📦 Initial Containing Block (ICB)</h1>
<div style="color: #666; margin-bottom: 10px; font-size: 14px;">
Başlangıç Kapsayıcı Blok | Düzenin Sıfır Noktası
</div>
<div class="icb-definition">
<strong>🎯 ICB (Initial Containing Block)</strong> = Tarayıcı penceresinin (<strong>viewport</strong>)
boyutunu ve konumunu temsil eden <strong>en dıştaki sanal kapsayıcıdır</strong>.<br><br>
HTML akışındaki <strong>her şeyin</strong> nihai olarak boyutlandığı ve konumlandığı
<strong>ana referans noktasıdır</strong>.
</div>
</div>
<!-- Demo 1: Yüzde Genişlikler ICB'ye Göre -->
<div class="demo-section">
<h3>📐 1. Yüzde (%) Genişlikler ICB Referansı</h3>
<p style="font-size: 14px; color: #555; margin: 10px 0;">
Yüzde bazlı genişlikler, zincirleme hesaplamada en son <span class="highlight">ICB yapısına (viewport)</span> kadar
ulaşır.
</p>
<div class="percentage-demo">
<div style="margin-bottom: 10px;">📊 ICB yapısına göre yüzde genişlikler:</div>
<div class="width-half">
<strong>width: 50%</strong> (ICB genişliğinin yarısı)
</div>
<div class="width-three-quarters">
<strong>width: 75%</strong> (ICB genişliğinin 3/4 kısmını)
</div>
<div class="width-full">
<strong>width: 100%</strong> (Tam ICB genişliği)
</div>
</div>
<div style="font-size: 12px; color: #666; margin-top: 10px;">
💡 <strong>Not:</strong> Pencereyi yeniden boyutlandırın — bu kutuların genişlikleri ICB yapısına göre dinamik olarak
değişir.
</div>
</div>
<!-- Demo 2: Root Element (html) Bağlantısı -->
<div class="demo-section">
<h3>🌱 2. Root Element (<html>) Bağlantısı</h3>
<p style="font-size: 14px; color: #555; margin: 10px 0;">
<code><html></code> elementinin Kapsayıcı Bloğu <span class="highlight">ICB yapısıdır</span>.
</p>
<div class="root-info">
📄 <strong><html></strong> elementi → ICB tarafından konumlandırılır<br>
🎨 <span>background: linear-gradient(...)</span> → html arkaplanı = ICB alanını görselleştirir<br>
📏 <span>min-height</span> → ICB yüksekliğine göre ayarlanır
</div>
<div style="font-size: 12px; color: #666; margin-top: 10px;">
💡 <strong>Not:</strong> Sayfanın arkaplan degradesi, ICB yapısının tüm alanını kapsar.
</div>
</div>
<!-- Demo 3: Fixed Positioning -->
<div class="demo-section">
<h3>📍 3. Sabit Konumlandırma (Fixed) Referansı</h3>
<p style="font-size: 14px; color: #555; margin: 10px 0;">
<code>position: fixed;</code> ile ayarlanmış öğeler, HTML ağacındaki ebeveynlerini görmezden gelir
ve <strong>doğrudan ICB yapısına (viewport) kilitlenir</strong>.
</p>
<div style="background: #f8f9fa; padding: 12px; border-radius: 6px; font-family: monospace; font-size: 13px;">
.fixed-box {<br>
position: fixed;<br>
bottom: 20px;<br>
right: 20px;<br>
/* ICB yapısına göre konumlandırıldı */<br>
}
</div>
<div style="font-size: 12px; color: #666; margin-top: 10px;">
💡 <strong>Not:</strong> Sağ alttaki kırmızı kutuyu gözlemleyin. Sayfayı kaydırdıkça <strong>sabit kalır</strong>
— çünkü ICB yapısına kilitlenmiştir.
</div>
</div>
<!-- Kaydırma İçeriği -->
<div class="icerik">
<div class="scroll-note">
<div class="scroll-arrow">👇</div>
<p><strong>Sayfayı aşağı kaydırın</strong> — sağ alttaki
<span style="color: #ef4444; font-weight: bold;">fixed kutu</span> sabit kalacak.
</p>
<p style="font-size: 13px; color: #888;">⬇️ Aşağıda kaydırma alanı var — devam edin ⬇️</p>
</div>
<div style="height: 800px;"></div>
<div style="background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); padding: 20px; border-radius: 8px; text-align: center;">
<h3 style="margin: 0 0 10px 0;">✨ ICB yapısının Sabitliği</h3>
<p style="margin: 0;">
Sayfanın bu noktasına kadar kaydırdınız. Sağ alttaki <strong>kırmızı kutu</strong> hala aynı yerde mi?<br>
Evet! Çünkü <code>position: fixed</code> öğeler <strong>ICB yapısına (viewport)</strong> sabitlenmiştir.
</p>
</div>
<div style="height: 500px;"></div>
<div style="background: #2c3e50; color: white; padding: 20px; border-radius: 8px; text-align: center;">
<h3>🎯 Initial Containing Block (ICB)</h3>
<p style="margin: 10px 0 0 0;">
→ Tarayıcı penceresinin (viewport) sanal temsili<br>
→ Tüm yüzde birimlerin ve fixed positioning özelliğinin temel referansı<br>
→ HTML hiyerarşisinin en tepesindeki soyut kapsayıcı
</p>
</div>
</div>
<div class="footer">
<strong>ICB (Initial Containing Block) Demo</strong> | Viewport = Tarayıcı penceresi<br>
💡 Pencereyi yeniden boyutlandırın — yüzde genişliklerin ICB yapısına göre dinamik olarak değiştiğini gözlemleyin.<br>
🔒 Sağ alttaki fixed kutu, sayfa kaydırıldığında ICB yapısına sabitlenmiş olarak kalır.
</div>
<!-- Fixed Element - ICB'ye Sabitlenmiş -->
<div class="fixed-box">
📌 position: fixed
</div>
</body>
</html>/* ============================================
ICB (Initial Containing Block) Demo
============================================
*/
/* 1. ICB'nin root element (html) üzerindeki etkisi */
/* html elementi doğrudan ICB tarafından konumlandırılır */
html {
/* ICB alanını görselleştiren hafif degrade */
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
body {
margin: 0;
font-family: 'Segoe UI', Arial, sans-serif;
line-height: 1.6;
}
/* ICB Bilgi Kartı */
.icb-info {
background: rgba(255, 255, 255, 0.95);
margin: 20px;
padding: 20px;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.icb-info h1 {
margin: 0 0 10px 0;
color: #333;
font-size: 24px;
}
.icb-info .highlight {
color: #667eea;
font-weight: bold;
}
.icb-definition {
background: #f8f9fa;
border-left: 4px solid #667eea;
padding: 12px;
margin: 15px 0;
font-size: 14px;
}
/* 2. Yüzde genişlikler - ICB'ye göre hesaplanır */
.demo-section {
background: white;
margin: 20px;
padding: 20px;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.demo-section h3 {
margin: 0 0 15px 0;
color: #333;
border-bottom: 2px solid #667eea;
display: inline-block;
padding-bottom: 5px;
}
.percentage-demo {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 8px;
padding: 15px;
color: white;
}
/* Bu genişlikler ICB'ye (viewport) göre hesaplanır */
.width-half {
width: 50%;
background: rgba(255, 255, 255, 0.2);
padding: 10px;
margin: 10px 0;
border-radius: 6px;
text-align: center;
box-sizing: border-box;
}
.width-three-quarters {
width: 75%;
background: rgba(255, 255, 255, 0.2);
padding: 10px;
margin: 10px 0;
border-radius: 6px;
text-align: center;
box-sizing: border-box;
}
.width-full {
width: 100%;
background: rgba(255, 255, 255, 0.2);
padding: 10px;
margin: 10px 0;
border-radius: 6px;
text-align: center;
box-sizing: border-box;
}
/* Root element bilgisi */
.root-info {
background: #2c3e50;
color: #ecf0f1;
padding: 12px;
border-radius: 6px;
font-family: monospace;
font-size: 13px;
margin: 15px 0;
}
.root-info span {
color: #3498db;
}
/* Normal içerik */
.icerik {
padding: 20px;
background: white;
margin: 20px;
border-radius: 12px;
}
.scroll-note {
text-align: center;
padding: 20px;
color: #666;
}
.scroll-arrow {
font-size: 24px;
display: inline-block;
animation: bounce 1.5s infinite;
}
@keyframes bounce {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(10px);
}
}
/* 3. Fixed element - ICB'ye sabitlenmiş */
.fixed-box {
position: fixed;
bottom: 20px;
right: 20px;
background: #ef4444;
color: white;
padding: 15px 20px;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
font-weight: bold;
text-align: center;
z-index: 100;
}
.fixed-box::after {
content: "🔒 ICB'ye (Viewport) Sabitlendi";
display: block;
font-size: 11px;
margin-top: 5px;
font-weight: normal;
opacity: 0.9;
}
/* Footer */
.footer {
background: rgba(0, 0, 0, 0.8);
color: white;
text-align: center;
padding: 15px;
font-size: 12px;
margin-top: 20px;
}
/* Responsive */
@media (max-width: 768px) {
.icb-info,
.demo-section,
.icerik {
margin: 10px;
padding: 15px;
}
.fixed-box {
bottom: 10px;
right: 10px;
padding: 10px 15px;
font-size: 12px;
}
}Anonim Blok Kutular (Anonymous Boxes) Görünmez Düzenleyiciler ve Otomatik Sarmalama
Anonim Blok Kutular, geliştiricinin HTML'de açıkça etiketlemediği, ancak tarayıcının düzen kurallarını uygulamak için otomatik olarak yarattığı
sanal kutulardır.
Siz onları kodda göremezsiniz, DOM ağacında seçemezsiniz ama onlar sayfanın render edilmesinde fiziksel bir rol oynar.
Oluşum Mekanizması: "Ya Hep Ya Hiç" KuralıCSS'in katı bir kuralı vardır: Bir blok kapsayıcı (örneğin <div>), çocukları olarak ya tamamen blok öğeleri ya da
tamamen satır içi öğeleri barındırmalıdır bu karışıklığa izin vermez.
Eğer siz bir <div> içine hem bir <p> (blok) hem de çıplak bir metin (inline) koyarsanız, düzen bozulur.
Tarayıcı bu kural ihlalini düzeltmek için, o çıplak metni alır ve etiketlenmemiş, "Anonim" bir blok kutusu içine sarar.
Böylece içerideki herkes "blok" olur ve düzen sağlanır.
Kritik Önemi ve Kısıtlamalar Bu kutuların en büyük özelliği stil verilemez olmalarıdır.
Bir sınıfı veya ID'si olmadığı için CSS ile onları hedefleyemezsiniz ( div:first-child gibi seçiciler anonim kutuları atlar).
Ancak varlıkları, düzeni etkiler bu etki beklenmedik margin çakışmalarına veya paragraflar arasında açıklanamayan boşluklara neden olabilirler.
Bu durum genellikle geliştiricinin farkında olmadığı ekstra boşlukların veya hizalama sorunlarının kaynağıdır.
Özellikle metin ve blok öğelerin karıştığı yapılarda, tarayıcının bu görünmez kutuları oluşturduğunu bilmek, problemi çözmenin anahtarıdır.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Anonim Blok Kutular (Anonymous Boxes)</title>
<link rel="stylesheet" href="style.css?v=1.0.150">
</head>
<body>
<div class="container">
<div class="demo-header">
<h2>📦 Anonim Blok Kutular (Anonymous Boxes)</h2>
<p>Görünmez Düzenleyiciler ve Otomatik Sarmalama</p>
</div>
<div class="warning-note">
⚠️ <strong>CSS Kuralı:</strong> Bir blok kapsayıcı, çocukları olarak ya <strong>tamamen blok öğeleri</strong>
ya da <strong>tamamen satır içi öğeleri</strong> barındırmalıdır. Karışımda tarayıcı
<strong>anonim blok kutular</strong> oluşturur.
</div>
<!-- Anonim Blok Kutu Oluşumu Gösterimi -->
<div class="wrapper">
<!-- Bu çıplak metinler tarayıcı tarafından ANONİM BLOK KUTU içine alınır -->
🧩 Bu bir çıplak metindir (inline içerik) — Tarayıcı bunu anonim blok kutuya sarar
<p>✅ Bu bir paragraf (block element) — CSS ile stil verilebilir</p>
🧩 Bu da başka bir çıplak metin — Yine anonim blok kutuya sarılır
</div>
<!-- Kavram Açıklaması -->
<div class="explanation">
<h4>🔍 Anonim Blok Kutu Nedir?</h4>
<ul>
<li><strong>Geliştirici kodunda yoktur</strong> — tarayıcı otomatik oluşturur</li>
<li><strong>CSS ile seçilemez</strong> — class/id yoktur, <code>:first-child</code> gibi seçiciler onları atlar
</li>
<li><strong>Stil verilemez</strong> — ama düzeni fiziksel olarak etkiler</li>
<li><strong>Oluşum nedeni:</strong> <code><div></code> içinde blok (<code><p></code>) ve inline
(çıplak metin) karışımı</li>
</ul>
<div class="visual-hint">
💡 <strong>Görsel İpucu:</strong> Yukarıdaki mavi kutular (<code><p></code>) stil alırken,
çıplak metinlerin arkaplanında <span style="color:#f97316;">turuncu kenarlık</span> dışında CSS uygulanamaz —
onlar <strong>anonim blok kutuların içindedir</strong>.
</div>
</div>
<!-- Not: Anonim kutuları seçmeye çalışan ama başarısız olan CSS örneği (yorum satırı olarak) -->
<div
style="margin-top: 16px; font-size: 0.75rem; color: #475569; text-align: center; border-top: 1px solid #334155; padding-top: 16px;">
<code>/* ❌ Bu seçici anonim kutuya ULAŞAMAZ — sadece gerçek elementleri hedefler */</code><br>
<code>.wrapper :first-child { background: red; } /* Çalışmaz (anonim kutu seçilemez) */</code>
</div>
</div>
</body>
</html>body {
font-family: 'Segoe UI', Arial, sans-serif;
background: #0f172a;
color: #e2e8f0;
padding: 40px 20px;
margin: 0;
line-height: 1.6;
}
.container {
max-width: 700px;
margin: 0 auto;
}
/* Başlık */
.demo-header {
margin-bottom: 24px;
}
.demo-header h2 {
margin: 0 0 8px 0;
font-size: 1.5rem;
color: #f1f5f9;
}
.demo-header p {
margin: 0;
color: #94a3b8;
font-size: 0.9rem;
}
/* Ana kapsayıcı - Anonim blok kutusunun oluştuğu alan */
.wrapper {
background: #1e293b;
padding: 20px;
border-radius: 12px;
border-left: 4px solid #f97316;
}
/* Uyarı notu */
.warning-note {
background: rgba(249, 115, 22, 0.1);
border: 1px solid rgba(249, 115, 22, 0.3);
border-radius: 8px;
padding: 12px 16px;
margin-bottom: 20px;
font-size: 0.85rem;
color: #fcd34d;
}
.warning-note strong {
color: #f97316;
}
/* Gerçek <p> elementi - stil uygulanabilir */
.wrapper p {
background: #3b82f6;
padding: 12px;
margin: 12px 0;
border-radius: 6px;
color: white;
}
/* Bu seçici ANONİM KUTULARI SEÇEMEZ - sadece gerçek elementleri seçer */
.wrapper :first-child {
/* Bu sadece ilk GERÇEK elemente uygulanır (varsa), anonim kutuya değil */
outline: none;
}
/* Açıklama alanı */
.explanation {
margin-top: 24px;
background: #0f172a;
border: 1px solid #334155;
border-radius: 10px;
padding: 16px;
}
.explanation h4 {
margin: 0 0 12px 0;
color: #f97316;
font-size: 1rem;
}
.explanation ul {
margin: 0;
padding-left: 20px;
}
.explanation li {
margin: 8px 0;
color: #cbd5e1;
font-size: 0.85rem;
}
.explanation code {
background: #334155;
padding: 2px 6px;
border-radius: 4px;
font-size: 0.8rem;
color: #fcd34d;
}
.visual-hint {
font-size: 0.8rem;
color: #64748b;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid #334155;
text-align: center;
}
.visual-hint i {
font-style: normal;
display: inline-block;
}Liste Öğesi Düzeni (display: list-item) Blok Davranış ve İşaretçi Kutusu
display: list-item, temel olarak HTML'deki <li> (liste öğesi) etiketlerinin fabrika ayarıdır.
Bu değer, bir öğenin hibrit bir karaktere bürünmesini sağlar: Hem bir blok gibi davranır hem de yanına otomatik bir
işaretçi iliştirir.
Mimari: Çift Kutulu Yapı (Dual Box) Tarayıcı, "list-item" olarak tanımlanan tek bir öğeden, perde arkasında iki ayrı kutu üretir:
-
Ana Kutu
(Principal Box):
İçeriğin bulunduğu
kısımdır ve normal bir blok kutusu gibi davranır
( yeni satırdan başlar ve tüm genişliği kaplar ). - İşaretçi Kutusu (Marker Box): Ana kutunun yanına yerleşen, madde işaretini ( disk, kare, numara ) içeren özel kutudur.
Bu kutu, CSS'in ::marker sözde öğesi tarafından yönetilir.
Önemi: Her Şeyi Liste YapabilmekBu display değeri, herhangi bir öğeyi (örneğin bir <div> veya <p> etiketini) zorla bir liste öğesi gibi davranmaya iter.
Bu sayede, HTML yapısını değiştirmeden görsel olarak listeler oluşturma esnekliği sunar.
Ayrıca list-style-position özelliği (işaretçinin içeride mi dışarıda mı duracağı), sadece ve sadece bu display modunda çalışır.
Bu özellik, özellikle özel tasarlanmış listelerde veya pseudo-element kullanmadan işaretçi kontrolü sağlamak istediğiniz durumlarda oldukça kullanışlıdır.
Gerçek Dünya SenaryosuBir öğenin neden beklenenden farklı hizalandığını, neden boşluk oluştuğunu veya neden z-index'in çalışmadığını anlamaya çalışırken, çoğu zaman sorun bu görünmez mekanizmalardan kaynaklanır.
Bu nedenle ileri seviye CSS geliştirme, sadece özellikleri bilmek değil, tarayıcının bu iç kurallarını okuyabilme becerisidir.
İleri Seviye CSS Mekanizması
Display: list-item, tarayıcının perde arkasında çift kutu (dual
box)
oluşturduğu özel bir CSS davranışıdır. Bu örnekte gösterilen ::marker
pseudo-element'i
ve işaretçi kutusu (marker box) kavramları, CSS ileri seviye konuları
arasında yer
alır.
Bu mekanizma, flexbox veya grid gibi modern düzen modellerinden önce
anlaşılması
gereken
tarayıcı içi düzen kurallarını (layout rules) açıklamaktadır. Örnekte kullanılan bazı
seçiciler
(::marker) ve yapısal kavramlar, CSS'in daha derin katmanlarına aittir.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Liste Öğesi Düzeni (display: list-item)</title>
<link rel="stylesheet" href="style.css?v=1.0.150">
</head>
<body>
<div class="container">
<div class="demo-header">
<h2>📋 Liste Öğesi Düzeni (display: list-item)</h2>
<p>Blok Davranış + İşaretçi Kutusu | Çift Kutulu Yapı</p>
</div>
<!-- Çift Kutu Yapısı Açıklaması -->
<div class="info-card">
<h4>🎯 Mimari: Çift Kutulu Yapı (Dual Box)</h4>
<p style="margin: 0 0 12px 0; font-size: 0.85rem; color: #94a3b8;">
<code>display: list-item</code> tek bir öğeden perde arkasında <strong>iki ayrı kutu</strong> üretir:
</p>
<div class="dual-box">
<div class="box">
<strong>📦 Ana Kutu</strong><br>
<code>(Principal Box)</code><br>
<span style="font-size: 0.75rem;">İçeriğin bulunduğu kısım, blok davranışı</span>
</div>
<div class="box">
<strong>🔘 İşaretçi Kutusu</strong><br>
<code>(Marker Box)</code><br>
<span style="font-size: 0.75rem;">Madde işaretini içeren özel kutu ::marker ile yönetilir</span>
</div>
</div>
</div>
<!-- Demo 1: Temel list-item -->
<div class="demo-area">
<h4>📌 1. Temel Kullanım — <code><div></code> etiketlerini liste öğesine dönüştürme</h4>
<div class="liste-simulasyonu">
<div class="madde">Özel Madde 1 — display: list-item ile liste öğesi oldu</div>
<div class="madde">Özel Madde 2 — normalde <div> ama artık işaretçisi var</div>
<div class="madde">Özel Madde 3 — blok davranışı + işaretçi kutusu</div>
</div>
<div style="font-size: 0.7rem; color: #64748b; margin-top: 10px;">
💡 Bu <div> elementleri normalde liste öğesi değil, <code>display: list-item</code> ile liste davranışı
kazandı.
</div>
</div>
<!-- Demo 2: Farklı işaretçi stilleri -->
<div class="demo-area">
<h4>🎨 2. İşaretçi Kutusu Özelleştirmesi — <code>list-style-type</code></h4>
<div class="liste-simulasyonu">
<div class="madde-farkli">list-style-type: circle — yuvarlak işaretçi</div>
<div class="madde-farkli" style="list-style-type: disc;">list-style-type: disc — dolu yuvarlak</div>
<div class="madde-farkli" style="list-style-type: decimal;">list-style-type: decimal — numaralı</div>
</div>
</div>
<!-- Demo 3: ::marker ile özelleştirme (çift kutu yapısının kanıtı) -->
<div class="demo-area">
<h4>✨ 3. <code>::marker</code> ile İşaretçi Kutusuna Müdahale</h4>
<div class="liste-simulasyonu">
<div class="madde-ozel">İşaretçi özelleştirildi — emoji eklendi</div>
<div class="madde-ozel" style="::marker: content '⭐ ';">⭐ Yıldız işaretçili özel madde</div>
<div class="madde-ozel" style="list-style-type: none; --moz-list-style-type: none;"></div>
</div>
<div style="font-size: 0.7rem; color: #64748b; margin-top: 10px;">
💡 <code>::marker</code> pseudo-elementi sadece <code>display: list-item</code> olan öğelerde çalışır —
işaretçi kutusunun varlığını kanıtlar.
</div>
</div>
<!-- Kavram Açıklaması -->
<div class="explanation">
<h4>🔍 Liste Öğesi Düzeni (display: list-item) Nedir?</h4>
<ul>
<li><strong>Fabrika ayarı:</strong> HTML dilinde <code><li></code> etiketlerinin varsayılan
<code>display</code> değeridir
</li>
<li><strong>Hibrit yapı:</strong> Hem <strong>blok gibi davranır</strong> (yeni satır, tam genişlik) hem de
<strong>işaretçi kutusu ekler</strong>
</li>
<li><strong>Her öğe liste olabilir:</strong> <code><div></code>, <code><p></code> gibi herhangi bir
öğeye uygulanabilir</li>
<li><strong>::marker ile kontrol:</strong> İşaretçi kutusu <code>::marker</code> pseudo-element ile
özelleştirilebilir</li>
<li><strong>Özel CSS özellikleri:</strong> <code>list-style-type</code>, <code>list-style-position</code> sadece
bu <code>display</code> modunda çalışır</li>
</ul>
<div class="note">
💡 <strong>Gerçek Dünya Senaryosu:</strong> Bir öğenin neden beklenmedik hizalandığını veya neden
<code>z-index</code>'in çalışmadığını anlamaya çalışırken,
çoğu zaman sorun bu <strong>çift kutu yapısı</strong> ve <strong>görünmez işaretçi kutusu</strong> ile
ilgilidir.
</div>
</div>
</div>
</body>
</html>body {
font-family: 'Segoe UI', Arial, sans-serif;
background: #0f172a;
color: #e2e8f0;
padding: 40px 20px;
margin: 0;
line-height: 1.6;
}
.container {
max-width: 700px;
margin: 0 auto;
}
/* Demo başlığı */
.demo-header {
margin-bottom: 24px;
}
.demo-header h2 {
margin: 0 0 8px 0;
font-size: 1.5rem;
color: #f1f5f9;
}
.demo-header p {
margin: 0;
color: #94a3b8;
font-size: 0.9rem;
}
/* Bilgi kartı - Çift Kutu Yapısı */
.info-card {
background: #1e293b;
border-radius: 12px;
padding: 16px;
margin-bottom: 20px;
border-left: 4px solid #10b981;
}
.info-card h4 {
margin: 0 0 12px 0;
color: #10b981;
font-size: 1rem;
}
.info-card .dual-box {
display: flex;
gap: 20px;
flex-wrap: wrap;
margin-top: 12px;
}
.info-card .box {
flex: 1;
background: #0f172a;
padding: 12px;
border-radius: 8px;
text-align: center;
}
.info-card .box strong {
color: #10b981;
}
.info-card .box code {
background: #334155;
padding: 2px 6px;
border-radius: 4px;
font-size: 0.75rem;
}
/* Demo alanı - display: list-item uygulaması */
.demo-area {
background: #1e293b;
border-radius: 12px;
padding: 20px;
margin-bottom: 20px;
}
.demo-area h4 {
margin: 0 0 16px 0;
color: #94a3b8;
font-size: 0.85rem;
font-weight: normal;
border-bottom: 1px solid #334155;
padding-bottom: 8px;
}
/* display: list-item uygulanan div'ler - normalde liste öğesi değiller */
.liste-simulasyonu {
background: #0f172a;
border-radius: 8px;
padding: 8px;
}
.madde {
display: list-item;
list-style-type: square;
margin-left: 30px;
margin-bottom: 8px;
padding: 8px 12px;
background: #334155;
border-radius: 6px;
color: #f1f5f9;
font-size: 0.9rem;
}
/* Farklı işaretçi stilleri gösterimi */
.madde-farkli {
display: list-item;
list-style-type: circle;
margin-left: 30px;
margin-bottom: 8px;
padding: 8px 12px;
background: #334155;
border-radius: 6px;
color: #f1f5f9;
}
/* ::marker ile işaretçi özelleştirme (çift kutu yapısının kanıtı) */
.madde-ozel {
display: list-item;
list-style-type: none;
margin-left: 30px;
margin-bottom: 8px;
padding: 8px 12px;
background: #334155;
border-radius: 6px;
color: #f1f5f9;
}
.madde-ozel::marker {
content: "✨ ";
color: #fbbf24;
font-size: 1.1rem;
}
/* Açıklama alanı */
.explanation {
background: #0f172a;
border: 1px solid #334155;
border-radius: 10px;
padding: 16px;
}
.explanation h4 {
margin: 0 0 12px 0;
color: #10b981;
font-size: 1rem;
}
.explanation ul {
margin: 0;
padding-left: 20px;
}
.explanation li {
margin: 8px 0;
color: #cbd5e1;
font-size: 0.85rem;
}
.explanation code {
background: #334155;
padding: 2px 6px;
border-radius: 4px;
font-size: 0.8rem;
color: #fcd34d;
}
.note {
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid #334155;
font-size: 0.75rem;
color: #64748b;
text-align: center;
}DevTools ile Debugging ve Analiz Tarayıcının Röntgenini Çekmek
Modern web geliştirme, tarayıcıların sunduğu Geliştirici Araçları olmadan düşünülemez.
DevTools, yazdığınız kodun tarayıcıda nasıl göründüğünü gösteren bir ayna değil; tarayıcı motorunun o kodu nasıl yorumladığını, önceliklendirdiğini ve oluşturduğunu gösteren şeffaf bir penceredir.
CSS kurallarının neden uygulanmadığını anlamak, hataları bulmak ve sayfa düzenindeki performans darboğazlarını teşhis etmek için birincil araçtır.
Canlı Müdahale ve Kutu Modeli Analizi Bu araçlar sayesinde geliştiriciler, CSS Kutu Modeli'nden ( margin, border, padding ) en karmaşık hesaplamalara kadar her şeyi görselleştirebilir.
Kod editörüne dönmeden, tarayıcı üzerinde değerleri değiştirerek anlık prototipleme ve test yapma yeteneği sağlar.
İleri Düzey Görselleştirme (Flex/Grid) Özellikle Flexbox ve Grid gibi modern düzenleme sistemlerinde, DevTools hayati bir rol oynar.
Tarayıcı, bu soyut yapıların üzerine sanal çizgiler ve rehberler çizerek, geliştiricinin "Hangi kutu nereye, neden gitti?" sorusunu saniyeler içinde yanıtlamasını sağlar.
DevTools kullanımı sadece araç bilgisi değil, bir problemi adım adım parçalayarak analiz etme sürecidir.
Deneyimli geliştiriciler, bir hata gördüğünde doğrudan kod yazmaz; önce DevTools üzerinden sorunun kaynağını izole eder.
Stil Dedektifliği: Computed vs Specified Yazılan Kural ve Uygulanan Gerçek
Styles sekmesi, geliştiricinin "istek listesidir".
Burada, seçilen öğeye hangi dosyanın hangi satırından kural atandığını görürsünüz.
Kaskad Analizi: Bu alan, CSS'in savaş alanıdır, aynı öğeyi hedefleyen çakışan kurallar listelenir.
Daha yüksek önceliğe sahip bir kural tarafından ezilen
özellikler, tarayıcı tarafından üzeri çizili
olarak gösterilir.
Display Hatalarının Tespiti: Bu görsel ipucu hayati önem taşır.
Örneğin: display: inline olan bir öğeye width: 300px verirseniz, tarayıcı width kuralının üzerini çizer ve yanına bir ünlem koyar ve bu, "Inline öğeler genişlik alamaz, bu kod geçersizdir" demenin sessiz yoludur.
Computed Sekmesi: Matematiksel Gerçek (Computed)Computed sekmesi, tüm savaşlar bittikten sonra tarayıcının ekrana bastığı "son mutlak gerçektir".
Burada miras alma ( inheritance ), kaskad ve yüzdesel hesaplamalar bitmiştir. em veya % değerleri, burada nihai piksel değerine dönüşmüş olarak görünür.
Gerçek Boyut ve Kutu Modeli: Öğenin margin, border ve padding dahil olmak üzere ekranda kapladığı milimetrik alanı burada görürsünüz.
Display Doğrulaması: Özellikle Flexbox veya Grid içindeki öğelerin, tarayıcı tarafından nihai olarak nasıl ( block, inline-flex vb.) yorumlandığı burada kesinleşir.
Debug StratejisiBir stil çalışmadığında ilk bakılması gereken yer Styles sekmesidir.
Eğer kural burada görünmüyorsa hiç uygulanmamıştır, üzeri çiziliyse başka bir kural tarafından ezilmiştir.
Styles doğru görünüyorsa, ikinci adım Computed sekmesidir; burada nihai değer incelenerek hesaplama hataları tespit edilir.
Layout Shifting (Düzen Kayması) Analizi Görsel İstikrar ve CLS Metrikleri
Layout Shifting, bir web sayfasının yüklenmesi sırasında veya kullanıcı etkileşiminden hemen sonra, var olan öğelerin
beklenmedik bir şekilde yer değiştirmesidir.
Bu durum, Google'ın Core Web Vitals metriklerinden biri olan CLS skoru ile ölçülür ve kötü bir kullanıcı deneyimine işaret eder.
Genellikle geç yüklenen bir resim, aniden beliren bir reklam veya özel bir fontun yüklenmesi, üstteki öğenin boyutunu değiştirerek alttaki tüm içeriği aşağı iter.
DevTools ile Teşhis: Mor AlarmChrome ve Firefox'taki Performans paneli, sayfa yüklenirken gerçekleşen tüm düzen kaymalarını saniye saniye izler.
Görsel İşaretleme: Rendering sekmesi altındaki "Layout Shift Regions" seçeneğini açarsanız, tarayıcı kayma yaşanan alanları sayfada anlık olarak mor renkte yakıp söndürerek sizi uyarır.
Hata Ayıklama: Performans raporunda bir kaymaya tıkladığınızda, "Hangi öğe kaydı?", "Başlangıç ve bitiş koordinatları ne?" gibi soruların cevabını piksel cinsinden görürsünüz.
Display ve CLS İlişkisi: Yer Tutucu StratejisiBir öğeye başlangıçta display: none verip (0 piksel alan), veriler yüklendikten sonra JavaScript ile display: block yapmak ( 300 piksel alan ), sayfa düzeninde ani bir patlamaya neden olur.
Bu ciddi bir CLS nedenidir çünkü içerik aniden kullanıcıyı aşağı iter.
Çözüm: Kaymaya neden olacak dinamik öğelere, yüklenmeden önce CSS ile min-height veya aspect-ratio gibi değerler vererek
yer tutucu alanlar ayırmaktır.
Gerçek Hata SenaryosuKullanıcı bir butona tıklamak üzereyken sayfa kayarsa, yanlış öğeye tıklama gibi kritik UX hataları oluşabilir.
Bu durum genellikle geç yüklenen içeriklerin yer kaplamaması veya dinamik olarak eklenen bileşenlerin layout'u itmesiyle ortaya çıkar.
Flexbox ve Grid için Görsel Araçlar Görünmez Çizgileri ve Hizalamayı Yönetmek
Modern DevTools'lar, geleneksel display değerlerinin ötesine geçerek, Flexbox ve Grid sistemleri için bize özel görsel ipuçları sunar.
Bir öğeye display: flex veya display: grid değeri verdiğinizde, DOM ağacında (Elements panelinde) o etiketin yanında hemen küçük bir "flex" veya "grid" rozeti belirir.
Bu rozetler, geliştiricinin kalabalık HTML yapısı içinde hangi kutuların "Container"rolü üstlendiğini bir bakışta anlamasını sağlar.
Sanal Izgarayı Görünür Kılmak (Overlay)Sihir, bu rozetlere tıkladığınızda gerçekleşir. Tarayıcı, sayfanın üzerine şeffaf bir katman serer.
Normalde görünmez olan satırlar, sütunlar, hücre sınırları ve özellikle gap boşlukları, neon çizgilerle parlayarak görünür hale gelir.
Bu görsel yardım, justify-content veya align-items gibi hizalama kurallarının öğeleri tam olarak nereye taşıdığını ve boşlukların neden oluştuğunu anlık olarak görmenizi sağlar.
Kod Yazmadan Düzenleme: Görsel EditörlerBazı tarayıcılar (özellikle Firefox ve Chrome), CSS stilleri panelinde display: flex özelliğinin yanına küçük bir "yıldırım" veya "kutu" ikonu koyar.
Bu düğmeye bastığınızda, kod yazmak yerine tıklayarak kullanabileceğiniz bir Görsel Kontrol Paneli açılır.
Öğeleri ortalamak, yaslamak veya sıralamak için CSS kodlarını ezbere yazmak yerine, bu paneldeki ikonlara tıklayarak sonucu
canlı olarak izleyebilir ve kodu tarayıcıya yazdırabilirsiniz.
Bu araçlar özellikle karmaşık hizalama sorunlarında, öğelerin neden beklenenden farklı konumlandığını anlamak için kullanılır.