CSS Birimleri Rehberi: px, rem, Viewport ve Container Query

Sayıların Dili: Birimler (Units) Nedir?

CSS'te bir öğenin genişlik, yükseklik, boşluk veya yazı tipi boyutunu belirlemek için kullanılan sayısal değerlere ve onların son eklerine Birimler adı verilir.

Bu birimler, dijital dünyada soyut görünen tasarımları ölçülebilir, kontrol edilebilir ve yeniden üretilebilir hale getiren matematiksel bir dilin parçasıdır.

Bir kutunun ne kadar geniş olacağı, bir metnin ne kadar okunabilir olacağı veya iki element arasındaki mesafenin ne kadar "rahat" hissedileceği; tamamen bu birimlerin doğru kullanımına bağlıdır.

Bu nedenle birimler, CSS'in sadece renkli kutular çizen bir dekorasyon dili değil, aynı zamanda matematiksel temellere dayanan, ölçeklenebilir, duyarlı (responsive) ve erişilebilir düzenler inşa eden ciddi bir mühendislik aracı olmasının temelini oluşturur.

Kısacası CSS'te "boyut" dediğimiz şey, sabit bir değer değil; bağlama göre anlam kazanan bir sistem kararını temsil eder.

Doğru Seçimin Kritik Etkileri

Birim seçimi ( px yerine rem kullanmak ), tasarımın sadece estetik görünümünü değil, sistemin omurgasını etkiler:

1. Erişilebilirlik (Accessibility): Kullanıcı, görme sorunları nedeniyle tarayıcı ayarlarından "Metin Boyutunu" büyüttüğünde, tasarımın patlamadan buna uyum sağlaması veya sabit kalıp okunamaz hale gelmesi tamamen seçilen birime bağlıdır.

Göreceli birimler, kullanıcı tercihlerini dikkate alırken; mutlak birimler bu değişime direnç gösterir ve bu fark, doğrudan kullanıcı deneyimini belirler.

2. Duyarlılık (Responsiveness): Tasarımın devasa bir masaüstü ekranından, avuç içi kadar bir mobil ekrana geçerken orantılı olarak küçülüp büyümesi, akışkan birimlerin başarısıdır.

Bu sayede aynı tasarım, farklı ekran boyutlarında yeniden yazılmadan adapte olur ve tutarlı bir görsel deneyim sunar.

3. Performans: Tarayıcının piksel hesaplamalarını (rendering cycle) ne kadar verimli yapacağı, birimlerin karmaşıklığına ve birbirine bağımlılığına göre değişen teknik bir karardır.

Özellikle birbirine bağlı çok sayıda göreceli hesaplama, tarayıcının yeniden hesaplama maliyetini artırabilir ve bu durum performans üzerinde dolaylı bir etki yaratır.

İki Büyük Doktrin: Mutlak ve Göreceli

CSS mimarisinde birimler, temel olarak Mutlak ( Sabit ) ve Göreceli ( Esnek ) olmak üzere iki farklı felsefeye ayrılır.

Bu ayrım sadece teknik bir sınıflandırma değil, tasarım yaklaşımını belirleyen temel bir karardır.

Mutlak birimler, geliştiriciye tam kontrol ve öngörülebilirlik sunarken; göreceli birimler, değişen koşullara uyum sağlayabilen dinamik bir sistem kurar.

Her biri, geliştiriciye CSS üzerinde farklı bir kontrol düzeyi sunar: Biri "kesinlik ve garanti" vaat ederken,

"uyum ve esneklik" vaat eder.

Modern web geliştirme yaklaşımı, bu iki sistemi birbirine rakip değil; doğru yerde birlikte kullanılan tamamlayıcı araçlar olarak ele alır.

Tanım: Değişmezlik Yasası

Mutlak birimler, adından da anlaşılacağı gibi, değerleri her zaman aynı kalan, dış dünyadaki fırtınalardan etkilenmeyen

sabit ve inatçı birimlerdir.

Onlara "5 birim" dediğinizde, dünyanın her yerinde, her tarayıcıda ve her koşulda tam olarak "5 birim" yer kaplamaya çalışırlar; pazarlığa kapalıdırlar.

Bu davranış, tasarımın en küçük detaylarının bile kontrol altında tutulmasını sağlar ve geliştiriciye tam bir öngörülebilirlik sunar.

Ancak bu kesinlik, aynı zamanda esneklikten feragat etmek anlamına gelir.

Tam Bağımsızlık ve İzolasyon

Bu birimler, ekrandaki veya baskıdaki başka bir öğenin boyutundan, ebeveynlerinin genişliğinden, kullanıcının kişisel font tercihlerinden veya ekranın çözünürlüğünden tamamen bağımsızdırlar.

Bu bağımsızlık, onları tasarım sisteminde izole çalışan, kendi kurallarını uygulayan sabit referans noktalarına dönüştürür.

Yani bir elementin boyutu, bulunduğu ortamdan değil; doğrudan yazılan değerden türetilir.

Bu durum, özellikle karmaşık düzenlerde beklenmedik zincirleme etkilerin oluşmasını engeller.

Mühendislik Kesinliği (Precision)

Esnekliğin ( responsive ) gerekmediği durumlarda, bu birimler en kesin ve öngörülebilir sonuçları verir.

Geliştirici ne yazdıysa, ekranda milimetrik olarak o görünür.

Bu özellik, özellikle tasarımın "piksel hassasiyetinde" olması gereken arayüzlerde kritik önem taşır.

"Acaba bu kutu ekran küçülünce kayar mı?" gibi belirsizlikleri ortadan kaldırır.

Ancak bu katılık, mobil cihazlarda ve farklı kullanıcı tercihlerinde uyumsuzluk yaratabilir.

Bu yüzden mutlak birimler, genellikle sistemin tamamı için değil; belirli ve kontrollü alanlar için tercih edilir.

Tanım: Ekranın Yapı Taşı

Piksel (px), ekrandaki fiziksel bir noktaya karşılık gelen veya daha teknik olarak tarayıcı tarafından belirlenen 1/96 inçlik optik referans açısına denk düşen, en yaygın kullanılan mutlak birimdir.

Ancak modern tarayıcılarda piksel, birebir fiziksel ekran noktası anlamına gelmek zorunda değildir; çoğu zaman cihazın çözünürlüğüne göre yeniden ölçeklenen mantıksal bir referans olarak kullanılır.

Bu yaklaşım sayesinde aynı tasarım, farklı çözünürlükteki cihazlarda tutarlı bir görsel sonuç üretir.

Dijital tasarımın başlangıcından beri standart ölçü birimi olmuştur ve tarayıcılar için tüm hesaplamaların nihai olarak dönüştürüldüğü

"sabit referans noktasıdır".

Başka bir deyişle, CSS'te kullanılan birçok birim ve hesaplama sonunda piksel cinsine çevrilir ve ekrana bu şekilde yansıtılır.

Kullanım Amacı: Piksel Mükemmelliği (Pixel Perfect)

Piksel, özellikle ince çizgiler, kenarlıklar (border: 1px solid;), gölgeler veya simgeler gibi kesin doğruluk gereken ve asla ölçeklenmemesi gereken minik detaylar için vazgeçilmezdir.

Bir tasarımda "Bu çizgi ne olursa olsun tam olarak bu kalınlıkta kalmalı" dediğiniz, tek bir noktanın bile hassasiyetini koruması gereken yerlerde en güvenilir limandır.

Bu yüzden ikon tasarımları, grid sistemleri veya ince arayüz detaylarında piksel tabanlı ölçüler sıkça tercih edilir.

Piksel, tasarımın "kontrol edilen" kısımlarında mükemmel sonuç verir; ancak "değişken" ortamlarda aynı başarıyı göstermez.

Kritik İçgörü: Piksel, kesinlik sağlar ama uyum sağlamaz.

Bu nedenle tüm sistemi px ile kurmak yerine, onu doğru yerlerde kullanmak profesyonel yaklaşımın temelidir.

Kritik Dezavantaj: Erişilebilirlik Duvarı

Mutlak ve inatçı yapısı nedeniyle, kullanıcı tarayıcı ayarlarından ( görme zorluğu nedeniyle ) varsayılan yazı tipi boyutunu büyüttüğünde, piksel cinsinden tanımlanmış fontlar veya boşluklar büyümez ve tepki vermez.

Bu statik davranış, tasarımın kullanıcı tercihlerini görmezden gelmesine neden olur ve özellikle görme bozukluğu olan kullanıcılar için erişilebilirliği ciddi şekilde zedeler.

Ayrıca farklı cihaz boyutlarında da aynı sabit değerlerin kullanılması, tasarımın orantısız görünmesine ve kullanıcı deneyiminin bozulmasına yol açabilir.

Bu yüzden modern CSS yaklaşımında piksel, ana yapı birimi değil; daha çok kontrollü detay aracı olarak konumlandırılır.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mutlak Birimler ve Piksel (px) Giriş Örneği</title>
    <link rel="stylesheet" href="style.css?v=1.0.150">
</head>

<body>
    <div class="sabit-cerceve">
        <div class="pixel-kutu">Hassas Ölçü</div>
    </div>
</body>

</html>

/* CSS Uygulaması */

.sabit-cerceve {
    /* Kenarlıklar genellikle px ile verilir çünkü incelik sabittir */
    border: 2px solid #2c3e50;
    padding: 20px;
    width: 300px;
    /* Genişlik ekran ne olursa olsun 300px kalır */
}

.pixel-kutu {
    background-color: #34495e;
    color: white;
    height: 50px;
    /* Yükseklik sabittir */
    line-height: 50px;
    text-align: center;
}

Tanım: Matbaanın Cetveli

Baskı birimleri, dijital piksellerin soyut dünyasından çıkıp, gerçek dünyadaki fiziksel ve matbaa ölçülerini temel alan somut birimlerdir.

Bu birimler, ekran çözünürlüğünden bağımsız olarak, kağıt üzerindeki kesin, ölçülebilir ve değişmez mesafeleri ifade eder.

Yani burada ölçüm, ekranın nasıl davrandığına göre değil; fiziksel dünyanın kurallarına göre yapılır.

Bu yaklaşım, dijital tasarım ile geleneksel baskı dünyası arasında doğrudan bir köprü kurar.

pt (Point/Punto): Matbaa ve tipografinin evrensel standardıdır.

Teknik olarak \(1\text{ inç} = 72pt\) olacak şekilde tanımlanır.

Bu nedenle 1pt, fiziksel dünyada kesin bir uzunluğa karşılık gelir ve özellikle metin boyutlandırmada yüksek hassasiyet sağlar.

Kitap ve dergi tasarımlarında, harflerin kağıt üzerindeki mürekkep izini belirleyen en hassas birimlerden biridir.

cm, mm, in: Santimetre, milimetre ve inç; günlük hayattan ve cetvellerden bildiğimiz fiziksel uzunluk birimleridir.

Bu birimler, özellikle baskı çıktılarında gerçek dünyadaki ölçülerle birebir örtüşen sonuçlar elde etmek için kullanılır.

Örneğin bir sayfanın kenar boşluğunu 2cm olarak belirlediğinizde, bu değer fiziksel çıktıda gerçekten 2 santimetre olarak ölçülebilir.

Kullanım Amacı: @media print

Bu birimler, dinamik ekran tasarımları için uygun değildir; asıl sahne aldıkları yer @media print (baskı) sorgularıdır.

Basılı bir çıktının kenar boşluklarını (margin), A4 kağıt boyutunu ve okunabilir font büyüklüğünü ayarlamak için kullanılırlar.

Bu sayede web içeriği, ekrandaki haliyle değil, profesyonelce dizilmiş bir Word veya PDF belgesi disipliniyle kağıda aktarılabilir.

Özellikle fatura, rapor, sözleşme veya akademik doküman gibi çıktılarda bu birimler vazgeçilmezdir.

Kritik Fark: Ekran için tasarlanan bir ölçü ile baskı için tasarlanan bir ölçü aynı değildir.

Piksel ekranın gerçekliğine, bu birimler ise fiziksel dünyanın gerçekliğine aittir.

Bu yüzden bu iki sistem karıştırıldığında, beklenmeyen ve tutarsız sonuçlar ortaya çıkabilir.

Tanım: Tasarımın Esnek Omurgası

Göreceli birimler, CSS'te modernliğin, sürdürülebilirliğin ve esnekliğin altın anahtarıdır.

Sabit ve değişmez bir piksel değerine körü körüne bağlı kalmak yerine; varlıklarını başka bir dinamik değere dayandırarak hesaplayan akıllı birimlerdir.

Onlar için "boyut" mutlak bir sayı değil, bir "ilişki" biçimidir.

Bu ilişki temelli yaklaşım, tasarımın sabit bir yapı değil; değişen ortamlara uyum sağlayan yaşayan bir sistem olmasını sağlar.

Bu yüzden göreceli birimler, modern web'in akışkan (fluid) doğasının temel yapı taşlarıdır.

Referans Noktaları ve Hesaplama

Bu birimler, boyutlarını hesaplamak için her zaman bir referans noktasına ihtiyaç duyarlar.

Bu referans; bazen içinde bulundukları ebeveyn kutunun font boyutu, bazen sayfanın kök font ayarı, bazen de kullanıcının ekranının ( viewport ) anlık genişliğidir.

Ortam değiştiğinde, referans değişir; referans değiştiğinde, göreceli birim de kendini otomatik olarak yeni duruma adapte eder.

Bu mekanizma, CSS'in arka planında sürekli çalışan bir hesaplama zinciri oluşturur.

Bir değerin değişmesi, ona bağlı tüm ölçümlerin yeniden hesaplanmasına neden olur ve bu sayede tasarım canlı bir şekilde güncellenir.

Kritik İçgörü: Göreceli birimler tek başına çalışmaz, her zaman bir referansa bağlıdır.

Bu yüzden yanlış referans seçimi, zincirleme hatalara yol açabilirken; doğru referans seçimi tüm sistemi kusursuz hale getirir.

Duyarlılık ve Erişilebilirlik Ekosistemi

Bu yaklaşım, tasarıma sadece teknik bir esneklik değil, aynı zamanda hayati bir duyarlılık ve erişilebilirlik katar.

Tasarımlarınızın; devasa bir masaüstü ekranından küçücük bir saate kadar her cihazda ve görme engelli bir kullanıcının büyütülmüş font tercihinde bile orantılı ve okunabilir kalmasını sağlar.

Kullanıcı deneyimi açısından bakıldığında, göreceli birimler tasarımın kullanıcıya uyum sağlamasını mümkün kılar; kullanıcıyı tasarıma uydurmaya çalışmaz.

Bu da modern web'in en önemli prensiplerinden biri olan kullanıcı odaklı tasarım yaklaşımını doğrudan destekler.

Mimari Perspektif: Göreceli birimler, tasarımı sabit bir yapıdan çıkarıp esnek bir sisteme dönüştürür.

Bu nedenle modern projelerde, ana yapı genellikle göreceli birimlerle kurulur; mutlak birimler ise sadece belirli ve kontrollü alanlarda kullanılır.

Felsefe Değişimi: Pikselden Orantıya

Bu birimler (em ve rem), CSS'in boyutlandırma felsefesini salt piksel hassasiyetinin kısıtlayıcılığından kurtarıp, metin akışı ile orantılılığa taşıyan temel mimari araçlardır.

Göreceli birimlerin bu özel alt kategorisi, bir öğenin boyutunu ( genişlik, yükseklik veya boşluk ) belirlerken, cetveldeki sayılara değil, o anki metin çevresinin büyüklüğüne odaklanır ve onu temel alır.

Bu yaklaşım, tasarımın statik bir yapıdan çıkıp içerikle birlikte yaşayan ve onunla senkronize olan bir sisteme dönüşmesini sağlar.

Görsel Ritim ve Bütünleşik Ölçekleme

Bu yaklaşım, tasarımın yapı taşları olan boşlukların (padding ve margin) ve diğer kapsayıcı öğelerin, içerdiği metin boyutuyla uyumlu ve senkronize bir şekilde birlikte ölçeklenmesini sağlar.

Bu sayede tasarımda bir görsel ritim oluşur; hiçbir element diğerinden kopuk veya orantısız görünmez.

Örneğin: Yazı fontu büyüdüğünde, butonun içindeki boşluklar da aynı oranda büyüyerek butonun "nefes alma payını" ve görsel dengesini korur.

Bu senkronizasyon, özellikle bileşen bazlı tasarımlarda tutarlılığı korumanın en etkili yollarından biridir.

Dinamik Ortamda Akıcılık

Bu birimlerin kullanımı, özellikle font boyutu tarayıcı ayarlarıyla ( erişilebilirlik ) veya medya sorgularıyla dinamik olarak değiştirildiğinde, tasarımın akıcılığını ve görsel ritmini korumak için hayati önem taşır.

Bu, font büyüklüğü değiştikçe, düğmelerin, kutuların ve aralarındaki mesafelerin de orantılı olarak genişlemesini garantileyen, kırılmaları önleyen son derece akıllı bir yaklaşımdır.

Böylece tasarım, farklı cihazlarda ve kullanıcı tercihlerinde tutarlı bir deneyim sunar.

Zincirleme Etki ve Dikkat Edilmesi Gerekenler

Özellikle em birimi, bulunduğu elementin font boyutuna bağlı olduğu için zincirleme bir hesaplama oluşturabilir.

Bir ebeveyn elementin font boyutu değiştiğinde, onun içindeki tüm em tabanlı değerler de bu değişimden etkilenir.

Bu durum güçlü bir esneklik sağlarken, kontrol edilmediğinde beklenmedik büyüme veya küçülmelere neden olabilir.

Buna karşılık rem birimi, referansını her zaman kök (root) elementten aldığı için daha stabil ve öngörülebilir bir davranış sergiler.

Kritik İçgörü: em esneklik sunar, rem kontrol sağlar.

Bu nedenle profesyonel projelerde bu iki birim genellikle birlikte ve bilinçli bir şekilde kullanılır.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Göreceli Birimler: em ve rem Giriş Örneği</title>
    <link rel="stylesheet" href="style.css?v=1.0.150">
</head>

<body>
    <div class="kapsayici">
        <article class="kart">
            <h3>Başlık (rem)</h3>
            <p class="icerik">Bu kartın içindeki tüm boşluklar font ile orantılıdır.</p>
            <button class="buton-esnek">İncele (em)</button>
        </article>
    </div>
</body>

</html>

/* CSS Uygulaması */
html {
    font-size: 16px;
    /* Kök değerimiz */
}

.kart {
    /* 16px * 2 = 32px boşluk. Kök font büyürse burası da büyür. */
    padding: 2rem;
    background: #f9f9f9;
    border-radius: 1rem;
}

h3 {
    font-size: 1.5rem;
    /* 24px */
    margin-bottom: 1rem;
}

.buton-esnek {
    /* em kullanımı: Butonun fontunu büyütürseniz, padding de orantılı büyür */
    font-size: 1rem;
    padding: 0.5em 1.5em;
    background: #27ae60;
    color: white;
    border: none;
} 

Mobilin Kronik Sorunu: Viewport Karmaşası

Modern CSS, duyarlı tasarımı ve günümüzün standardı olan Component-Based mimariyi desteklemek için, geleneksel Viewport birimlerinin ( vw / vh ) mobil cihazlarda yol açtığı kronik sorunları çözen çok daha spesifik araçlar sunar.

Özellikle mobil tarayıcılarda (Safari iOS ve Chrome Android), adres çubuğunun ve alt navigasyonun kaydırma sırasında

küçülüp büyümesi, klasik 100vh kullanımını bir kâbusa çeviriyor ve alttaki butonların arayüzün altında kalmasına neden oluyordu.

Bu problem, uzun süre boyunca geliştiricilerin hack'ler ve JavaScript çözümleri üretmesine neden olmuş; CSS tarafında net bir çözüm eksik kalmıştır.

Yani sorun sadece birim değil; viewport kavramının dinamik doğasının yanlış modellenmesiydi.

Dinamik Çözüm: lvh, svh ve dvh

Bu sorunu çözmek için CSS, "Viewport" kavramını üç farklı duruma bölerek daha hassas bir model sunmuştur.

1. svh (Small Viewport Height): Tarayıcı arayüzünün (adres çubuğu vb.) en geniş olduğu, yani görünür alanın en küçük olduğu durumu garanti eder.

Bu değer, özellikle içeriklerin hiçbir zaman kesilmemesi gereken senaryolarda güvenli bir alt sınır sağlar.

2. lvh (Large Viewport Height): Arayüz elementlerinin gizlendiği, ekranın en geniş halini baz alır.

Bu değer, maksimum alanı hedefleyen tasarımlar için idealdir; ancak dikkatli kullanılmazsa içerik taşmalarına neden olabilir.

3. dvh (Dynamic Viewport Height): Kullanıcı sayfayı kaydırdıkça adres çubuğunun hareketine göre anlık olarak güncellenen ve içeriği

canlı olarak adapte eden en akıllı birimdir.

Bu sayede tasarım, mobil cihazlarda gerçek zamanlı olarak kullanıcı etkileşimine uyum sağlar ve "zıplama" problemleri ortadan kalkar.

Kritik İçgörü: dvh = gerçek viewport davranışı.

Modern projelerde klasik vh yerine çoğunlukla dvh tercih edilmesi önerilir.

Yerel Bağlam: Container Queries Birimleri

Bir diğer devrimsel yenilik ise, bileşenlerin (components) tüm ekran yerine, içinde bulundukları kapsayıcıya göre boyutlanmasını sağlayan birimlerdir ( cqw, cqh ).

Bu yaklaşım, yıllardır kullanılan "global viewport" mantığını kırarak, tasarımı yerel bağlam odaklı hale getirir.

Artık bir bileşen, sayfanın genel genişliğine değil; sadece içinde bulunduğu alanın boyutuna göre davranır.

Bu sayede aynı bileşen, farklı yerlerde tamamen farklı ama uyumlu davranışlar sergileyebilir.

Örnek: Bir "Ürün Kartı" geniş bir grid içinde büyük görünürken, dar bir sidebar içinde otomatik olarak küçülebilir.

Çünkü referansı artık global ekran değil, kendi yerel konteyneridir.

Mimari Devrim: Bu yaklaşım, CSS'i sayfa bazlı tasarımdan çıkarıp bileşen bazlı sistemlere taşır.

Bu da modern frontend dünyasında kullanılan design system ve component architecture yapılarının temelini oluşturur.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dinamik Viewport Birimleri (vw, vh, vmin) Giriş Örneği</title>
    <link rel="stylesheet" href="style.css?v=1.0.150">
</head>

<body>
    <section class="hero-bolumu">
        <h1 class="akiskan-baslik">Geleceği Tasarla</h1>
        <div class="kare-obje">Her zaman ekrana sığarım</div>
    </section>
</body>

</html>

/* CSS Uygulaması */

.hero-bolumu {
    width: 100vw;
    /* Ekranın tam genişliği */
    height: 60vh;
    /* Ekran yüksekliğinin %60'ı */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #ecf0f1;
}

.akiskan-baslik {
    /* Yazı boyutu ekran genişledikçe büyür */
    font-size: 8vw;
    color: #2980b9;
}

.kare-obje {
    /* vmin kullanımı: Ekranın en dar kenarının %30'u kadar yer kaplar.
     Böylece obje hem dikey hem yatay ekranda görünür kalır. */
    width: 30vmin;
    height: 30vmin;
    background: #e67e22;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modern Mobil Çözüm: dvh (Dynamic Viewport Height) Giriş Örneği</title>
    <link rel="stylesheet" href="style.css?v=1.0.150">
</head>

<body>
    <div class="mobil-cerceve">
        <div class="ust-banner">
            <div class="ikon-daire">!</div>
        </div>

        <div class="icerik-alani">
            <h2>Bağlantı Kesildi</h2>
            <p>Lütfen internet ayarlarınızı kontrol edip tekrar deneyiniz. Şu an çevrimdışı moddasınız.</p>
        </div>

        <div class="alt-islem-cubugu">
            <a href="#" class="tam-genislik-link">Tekrar Dene</a>
        </div>
    </div>
</body>

</html>

                /* Temel Sıfırlama */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.mobil-cerceve {
    /* KRİTİK: Ekranın tamamını kapla (Dinamik Viewport) */
    height: 100dvh;
    width: 100%;
    background-color: #fdfdfd;
    position: relative;
    /* İçindeki öğeleri konumlandırmak için */
}

.ust-banner {
    /* Ekran yüksekliğinin %40'ını kapla */
    height: 40dvh;
    background-color: #ff4757;
    display: block;
    /* Flex değil, blok düzen */
    padding-top: 10dvh;
    /* İçeriği yukarıdan orantılı it */
}

.ikon-daire {
    width: 80px;
    height: 80px;
    background: white;
    border-radius: 50%;
    margin: 0 auto;
    /* Yatayda ortalamanın klasik yolu */
    text-align: center;
    line-height: 80px;
    font-weight: bold;
    font-size: 40px;
    color: #ff4757;
}

.icerik-alani {
    /* Ekran yüksekliğinin %45'ini kapla */
    height: 45dvh;
    padding: 40px 20px;
    text-align: center;
}

.icerik-alani h2 {
    font-family: sans-serif;
    margin-bottom: 15px;
    color: #2f3542;
}

.alt-islem-cubugu {
    /* Kalan %15'lik alanı kapla */
    height: 15dvh;
    padding: 20px;
    background: #f1f2f6;
    border-top: 1px solid #ddd;
}

.tam-genislik-link {
    display: block;
    width: 100%;
    height: 50px;
    background: #2f3542;
    color: white;
    text-decoration: none;
    text-align: center;
    line-height: 50px;
    border-radius: 8px;
    font-family: sans-serif;
}
                            

Tanım: Pencereye Bağlı Halatlar

Dinamik Viewport birimleri, bir öğenin boyutunu veya yazı tipini, doğrudan tarayıcı penceresinin ( Viewport ) anlık fiziksel boyutlarına sanal halatlarla bağlayarak çalışır.

Bu mekanizma, geliştiricilere yüzlerce medya sorgusu ( media query ) yazmak zorunda kalmadan, tek bir CSS kuralıyla

akışkan tipografi ve esnek düzenlemeler yapma gücü verir.

Yani tasarım, belirli kırılma noktalarına bağlı kalmak yerine, ekran boyutuna sürekli ve kesintisiz şekilde tepki verir.

Anlık Ölçekleme ve Orantı

vh ve vw gibi bu birimler; geleneksel piksel değerlerinin statik duruşunun aksine, ekran boyutundaki en ufak değişikliğe bile tepki vererek

anlık olarak ölçeklenir.

Örneğin: 100vw ekranın tam genişliğini, 50vh ise ekran yüksekliğinin tam yarısını ifade eder.

Bu matematiksel kesinlik, tasarımın akışkan olmasını sağlar; yani sayfa her ekran boyutunda yeniden hesaplanarak uyum sağlar.

Özellikle başlık boyutlarını vw ile tanımlamak, ekran büyüdükçe metnin de büyümesini sağlayarak etkileyici ve ölçeklenebilir tipografi oluşturur.

Kritik İçgörü: vw = genişliğe, vh = yüksekliğe bağlıdır.

Bu nedenle yanlış eksene bağlı kullanım, beklenmeyen tasarım bozulmalarına neden olabilir.

Kullanım Alanları ve Mobil Zorluğu

Bu dinamizm, özellikle kullanıcıyı karşılayan devasa başlıklar ve ekranı tam kaplaması gereken giriş bölümleri oluşturmak için vazgeçilmezdir.

Hero section, fullscreen slider veya landing page girişleri gibi alanlarda vh kullanımı oldukça yaygındır.

Ancak bu güç, mobil cihazlarda bir bedel ile gelir: Mobil tarayıcıların üst adres çubuklarının kaydırma esnasında gizlenip açılması, 100vh değerinin sürekli değişmesine ve sayfanın zıplamasına neden olur.

Bu durum, özellikle alt kısımlarda bulunan butonların veya içeriklerin görünmez hale gelmesine yol açabilir.

Modern Çözüm: Bu sorun, yeni nesil dvh, svh ve lvh birimleri ile çözülmüştür.

Bu yüzden modern projelerde klasik vh kullanımı yerine daha kontrollü alternatifler tercih edilmelidir.

Yerel Farkındalık: @container Devrimi

Kapsayıcı Sorgu Birimleri, CSS'in en yeni ve ileri düzey aracı olan @container kuralıyla birlikte sahneye çıkan, elementlerin çevrelerine olan duyarsızlığını sona erdiren yeni nesil ölçü birimleridir.

Yıllardır süregelen "Ekran ne kadar büyük?" sorusunu bir kenara bırakıp, "İçinde bulunduğum kutu ne kadar büyük?" sorusuna yanıt arayan,

bağlam farkındalığına sahip akıllı yapılardır.

Bu yaklaşım, CSS'te uzun süredir var olan global düşünme zorunluluğunu ortadan kaldırır.

Artık bir element, tüm sayfanın durumuna göre değil; yalnızca bulunduğu kapsayıcının boyutuna göre karar verir.

cqw ve cqh: İçeriye Bakan Gözler

cqw ve cqh birimleri; gözlerini ufuk çizgisine (Viewport) dikmek yerine, doğrudan içinde yaşadıkları en yakın tanımlı ebeveyn konteynerinin genişliğinin veya yüksekliğinin %1'ine eşittir.

Bu sayede, bir bileşen ( bir haber kartı gibi ), ekranın neresine yerleştirilirse yerleştirilsin, kendi ebeveyninin sınırlarına göre bağımsız bir matematik yürütür.

Yani aynı bileşen, farklı layout'lar içinde tamamen farklı ama uyumlu boyutlara sahip olabilir.

Kritik Fark: Viewport birimleri globaldir, container birimleri yereldir.

Bu fark, responsive tasarımın temel mantığını kökten değiştirir.

Mimari Dönüşüm: Modülerlik ve Bağımsızlık

Akademik ve mimari açıdan bakıldığında, bu birimler CSS'i küresel kapsama (global scope) sorunundan kurtaran ve yerel bir mikro-düzenleme sistemi kuran, @media sorgularından sonraki en önemli duyarlı tasarım devrimidir.

Özellikle bir bileşenin stilinin, sayfanın genelinden bağımsız olarak kendi yerel bağlamına göre ölçeklenmesini sağlayarak, modern

Bileşen Tabanlı Tasarım mimarisini kusursuz bir şekilde destekler.

Bu sayede geliştiriciler, bir bileşeni bir kez tanımlayıp farklı yerlerde tekrar kullanabilir; her kullanımda otomatik olarak ortama uyum sağlar.

Örneğin: Font boyutunu bileşenin kendi genişliğine (cqw) bağlamak; o bileşen dar bir sütuna girdiğinde yazının otomatik küçülmesini, geniş bir alana çıktığında ise büyümesini sağlayan akıllı ve modüler tipografi için en verimli yoldur.

Aynı mantık, padding, margin ve layout oranları için de geçerlidir; bu da tamamen kendi kendine ölçeklenen bileşenler oluşturmayı mümkün kılar.

Mimari İçgörü: Container Query birimleri, responsive tasarımı sayfa seviyesinden bileşen seviyesine indirir.

Bu, modern frontend dünyasında ölçeklenebilir ve sürdürülebilir arayüzler geliştirmenin en kritik adımlarından biridir.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kapsayıcı Sorgu Birimleri (cqw) Giriş Örneği</title>
    <link rel="stylesheet" href="style.css?v=1.0.150">
</head>

<body>
    <aside class="yan-panel">
        <div class="bilesen-kutusu">
            <div class="kart-icerik">
                <span class="etiket">Teknoloji</span>
                <h2 class="akilli-baslik">Kapsayıcı Sorguları ile Modüler Tasarım</h2>
                <p class="akilli-metin">
                    Bileşenler artık özgür! Ekran boyutu yerine içinde bulundukları
                    alanın genişliğine göre tepki veriyorlar.
                </p>
            </div>
        </div>
    </aside>
</body>

</html>

/* 1. Konteyner Tanımlama */
.bilesen-kutusu {
    /* Bu satır kritik: Tarayıcıya bu kutunun içindekilerin 
     bu kutunun genişliğini (inline-size) izlemesini söyler */
    container-type: inline-size;
    width: 100%;
    max-width: 500px;
    /* Test için sınırlandırdık */
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    overflow: hidden;
}

/* 2. Kapsayıcı Birimlerini (cqw) Kullanarak Stil Verme */
.kart-icerik {
    /* Padding, kutu genişliğinin %8'i kadar olsun */
    padding: 8cqw;
}

.etiket {
    display: inline-block;
    background: #3498db;
    color: white;
    padding: 1cqw 3cqw;
    border-radius: 4px;
    /* Font boyutu kutu genişliğinin %3.5'i */
    font-size: 3.5cqw;
    margin-bottom: 4cqw;
    font-family: sans-serif;
}

.akilli-baslik {
    /* Kutu daraldıkça başlık da tam orantılı küçülür */
    font-size: 7cqw;
    line-height: 1.2;
    color: #2c3e50;
    margin-bottom: 3cqw;
    font-family: 'Georgia', serif;
}

.akilli-metin {
    /* Metin boyutu kutu genişliğinin %4'ü */
    font-size: 4cqw;
    color: #7f8c8d;
    line-height: 1.5;
    font-family: sans-serif;
}

/* Hover etkisi: Kutu genişliğine göre gölge artsın */
.bilesen-kutusu:hover {
    box-shadow: 0 5cqw 10cqw rgba(0, 0, 0, 0.1);
}