🎯 CSS Container Queries'i Doğru Kullanma: Neden Önemli?

Selam! Bugün Container Queries'i tanıyalım ve neden Media Queries'den farklı (ve çoğu zaman daha güçlü) olduğunu keşfedelim 🚀

Neden "Container" diye bir şey var? 🤔

• Media Queries sadece viewport (tarayıcı penceresinin boyutu) bakıyor.
• Container Queries ise bileşenin kendi kapsayıcısının boyutuna bakıyor.
• Yani bir kart bileşeni yan menüde dar, ana içerikte geniş olabilir — her ikisi de kendi bağlamına göre uyum sağlar ✨

Bağlam (Context) neden kritik? 🎯

• Bileşen tabanlı tasarımda aynı bileşen farklı yerlerde farklı davranmalı.
• Container Queries sayesinde “benim genişliğim ne kadarsa o şekilde davran” diyebiliyorsun.
• Bu, yeniden kullanılabilirlik ve bakım kolaylığı demektir 🛠

Media Queries vs Container Queries — hızlı karşılaştırma

Özellik	Media Queries	Container Queries
Referans noktası	Viewport	Kapsayıcı (container)
Esneklik	Sayfa genelinde	Bileşen bazında
Yeniden kullanım	Zor (global stiller)	Kolay (izole stiller)

Pratik bir örnek 🎬

/* Kapsayıcıyı tanımla */
.card-container {
  container-type: inline-size;   /* genişliğe göre sorgula */
  container-name: card;
}

/* Kapsayıcı 400px'den genişse iki sütun */
@container card (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

/* Dar kapsayıcıda tek sütun */
@container card (max-width: 399px) {
  .card {
    display: block;
  }
}

Ne oluyor burada?

• .card-container bir container olur.
• @container card (min-width: 400px) kuralı, o kapsayıcının genişliği 400 px'i geçtiğinde devreye girer.
• Aynı .card bileşeni, yan menüde dar, ana alanda geniş olsa bile kendi kapsayıcısına göre düzenlenir 🎉

Özetle

• Container Queries = “Benim çevrem neyse ona göre davranırım”.
• Media Queries = “Sayfa ne kadar genişse ona göre davranırım”.
• Bileşenlerinizi bağlamdan bağımsız hale getirmek istiyorsanız, Container Queries tam size göre 👌

Hadi bir sonraki bölümde nasıl tanıyacağımızı ve tarayıcı desteğini inceleyelim! 🚀

---

🔁 CSS Container Queries Temelleri ve Media Queries ile Farkı

Hadi gelin, container queries'in sihrini birlikte keşfedelim 🎩✨

Media query'ler viewport'a bakar, hakikaten. Ama container query, "Benim kapsayıcım ne kadar geniş?" diye sorar. Yani bir öğe, kendi ebeveyninin (container'ının) boyutuna göre karar verir. Bu, bileşen tabanlı tasarımda devrim niteliğinde 🚀

Neden Bu Kadar Önemli?

• Yeniden kullanılabilirlik 🎯: Aynı kart bileşenini yan panelde, ana içerikte ya da modalda kullanırsınız — her yerde kendini uyarlar.
• Context-aware (bağlam farkında) 🧠: Bileşen, nereye yerleştirildiğini bilmek zorunda kalmaz. Kapsayıcısı ona söyler.
• Media query ile karıştırılmaz ❗️: Viewport 1200px olsa bile, yan panel 300px ise kart "dar mod"a geçer. İşte bu fark!

---

Sentaks — Çok Basit, Çok Güçlü 🛠

İki adım var:

1. Kapsayıcıyı tanımla → container-type (veya kısaca container)
2. Sorgula → @container kuralı ile

.card-container {
  container: inline-size;   /* veya: container-type: inline-size; */
  /* artık bu eleman bir "container" sorgulama kaynağı */
}

@container (inline-size >= 300px) {
  .card {
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
  }
  .card__title {
    font-size: 1.25rem;
  }
}

Ne oluyor burada?

• .card-container artık bir container — sorgulanabilir bir referans noktası.
• @container (inline-size >= 300px): "Eğer bu container'ın inline boyutu (yani yazı yönündeki genişlik) 300px veya daha fazlaysa..." demek.
• İçindeki .card stilleri sadece o koşul sağlandığında uygulanır.

💡 inline-size yerine size da kullanabilirsiniz (hem inline hem block boyutunu sorgular). Ama çoğu pratikte inline-size yeterli — ve performanslıdır.

---

Media Query vs Container Query — Kıyaslama 📊

Özellik	@media	@container
Kaynak	Viewport (tarayıcı penceresi)	Belirli bir kapsayıcı elementi
Kapsam	Sayfa geneli	Sadece o container'ın içindeki elemanlar
Bileşen izolasyonu	❌ Zor	✅ Doğal
Yeniden kullanım	Sınırlı	Çok yüksek

---

Küçük Bir İpucu 💡

Container query kullanmadan önce container tanımını unutmayın! Sık yapılan hata: @container yazıp container-type atamamak. Tarayıcı "Hangi container?" diyecektir 🤷‍♂️

/* ❌ Yanlış — container tanımı yok */
@container (inline-size >= 400px) { ... }

/* ✅ Doğru — önce container tanımla */
.sidebar { container: inline-size; }
@container (inline-size >= 400px) { ... }

---

Hazırsan bir sonraki bölümde gerçek bir kart bileşeni üzerinde container query'lerin nasıl hayat kurtardığını görelim 👇

---

❗️ Media Queries'i Kopyalama ile Karşılaşılan Sorunlar ve Yanlış Kullanımlar

Hazırsan bu kısımda container queries ile media queries karıştırıldığında neler oluyor, ona bir göz atalım 🎯

Neden bu karışıklık çıkıyor?

• Görünümde benzerlik: Her ikisi de @media / @container sözdizimiyle başlar, bu yüzden kopyala‑yapıştır yapmaya çok cazip geliyor.
• Eski alışkanlıklar: Yıllarca “viewport genişliğine göre tasarım” diye öğrendik, container queries geldiğinde de aynı mantığı uygulamaya çalışıyoruz.

Yaygın hatalar (ve nasıl kaçınılır) ❗️

Hata	Ne oluyor?	Doğru yaklaşım
Tek bir @media ile tüm bileşenleri kontrol etmek	Sayfa boyutu değiştiğinde her bileşen aynı anda yeniden düzenlenir → beklenmedik kaymalar, boşluklar.	Her bileşen için kendi container’ına özel @container yaz.
Viewport’u tek referans almak (geçici çözüm)	Mobilde güzel görünse de, yan yana iki kart olduğunda biri daralır, diğeri boşluğa kapılır.	Container’ın kendi genişliğine göre stiller ver.
Statik breakpoint’ler sabitlemek	Yeni bir bileşen eklendiğinde eski breakpoint’ler bozulur, bakım kabusu.	Fluid (esnek) tasarım + container query → bileşen kendi içindeki alana uyar.
@media (max-width: 600px) kopyalayıp @container yapmak	Container 600 px’den küçülse bile, viewport hâlâ büyükse stiller uygulanmaz.	Container’ın gerçek boyutunu sorgula: @container (max-width: 600px)

Küçük bir örnek: Yanlış vs. Doğru ⛔ → ✅

/* ❌ Yanlış: Tüm sayfa için tek media query */
@media (max-width: 600px) {
  .card { font-size: 1rem; }
}

/* ✅ Doğru: Her kart kendi container’ına bakar */
.card-container {
  container-type: inline-size;
}
@container (max-width: 400px) {
  .card { font-size: 0.9rem; }
}

Ne değişti?

• .card-container artık kendi genişliğini dinliyor.
• Kart yan yana durduğunda biri 350 px, diğeri 500 px olabilir; her biri kendi breakpoint’ine göre tepki veriyor.

Pratik ipuçları 🛠

• Container type belirtmeyi unutma: container-type: inline-size; (veya size için her iki boyut).
• İsimli container kullanarak çakışmaları önle: container-name: card; @container card (max-width: 400px) { … }.
• Fallback: Eski tarayıcılar için @media yedeği koy, ama asıl mantık container’da olsun.

Kısaca özetle 🎯

• Media queries sayfa ölçeğinde, container queries bileşen ölçeğinde çalışır.
• Kopyala‑yapıştır yaparsan viewport referans alırsın, bileşenin gerçek alanı değil.
• Her bileşeni kendi container’ına bağla → esnek, sürdürülebilir ve sürprizsiz bir layout elde et.

Hadi şimdi kendi projende bir tane container query yazıp farkı hisset! 🚀

---

🛠 Doğru Desen: Komponent Odaklı Tasarımde Container Query Kuralları

Hazırsan bu deseni adım adım inceleyelim 🎯

1️⃣ Bir öğeyi container olarak tanımla

CSS’de bir elementin “konteyner” olduğunu bildirmek için container-type (veya kısaca container) özelliğini kullanırız.
Genelde inline‑size (yani genişlik) yeterlidir.

.card {
  container: inline-size;   /* ya da container-type: inline-size; */
}

Ne oluyor?
.card artık kendi içindeki child’lar için bir container query kaynağı olur. Tarayıcı, .card’ın genişliğini izler ve @container kuralları bu genişliğe göre tetiklenir.

---

2️⃣ @container ile uyarlamalar yaz

Şimdi container’ın genişliği 300px’i geçtiğinde başlık boyutunu büyütelim.

@container (inline-size >= 300px) {
  .title {
    font-size: 1.5rem;
  }
}

Nasıl çalışıyor?

• Tarayıcı .card’ın inline-size’ını sürekli ölçer.
• Koşul sağlandığında (>= 300px) içindeki stiller devreye girer.
• Koşul sağlanmazsa stiller yoksayılır — media query’den farklı olarak viewport değil container bazlıdır.

---

3️⃣ İçerik boyutuna göre kartın kendini ayarlama (.card-inner)

Bazen kartın içerik genişliğine göre kendi düzenini değiştirmek isteriz.
Örneğin, .card-inner içindeki .media ve .content yan yana ya da alt alta dursun.

.card-inner {
  display: flex;
  flex-direction: column;          /* varsayılan: dikey */
  gap: 1rem;
}

@container (inline-size >= 400px) {
  .card-inner {
    flex-direction: row;           /* yatay dizilim */
    align-items: center;
  }
}

Bu sayede ne oluyor?

• Küçük kartlarda (genişlik < 400px) içerik dikey akar.
• Kart büyüdüğünde (>= 400px) yatay bir layout’e geçer — hiçbir media query yazmadan! 🎉

---

4️⃣ Utility class’larla birleşik kullanım

Projenizde utility‑first bir yaklaşım varsa (Tailwind, UnoCSS vb.) container query’leri de utility olarak yazabilirsiniz.

<div class="card container-inline">
  <div class="card-inner flex flex-col gap-4 @container-[inline-size>=400px]:flex-row @container-[inline-size>=400px]:items-center">
    <img class="media" src="..." alt="...">
    <div class="content">
      <h2 class="title">Başlık</h2>
      <p class="text">Açıklama metni...</p>
    </div>
  </div>
</div>

• container-inline → container-type: inline-size;
• @container-[inline-size>=400px]:flex-row → container 400px’i geçince flex-direction: row; uygular.

Avantaj: HTML’de tek yerde hem container tanımı hem de responsive davranışları görürsünüz. Kod tekrarı azalır, okunabilirlik artar ✅

---

🎯 Özet

Adım	Ne Yapıyor?
Container tanımla	.card { container: inline-size; }
Koşul yaz	@container (inline-size >= 300px) { … }
İçerik düzeni	.card-inner + @container ile flex-direction değiştir
Utility ile birleştir	HTML sınıflarında @container-[…] sözdizimi kullan

Bu desen sayesinde komponent bazlı, bağlam duyarlı ve bakımı kolay stiller yazarsınız. Container query’ler artık modern tarayıcılarda (%95+ destek) güvenle kullanılabilir — deneyin, farkı hissedeceksiniz! 🚀

---

🔁 Praktiği Deneyelim: İçerik Boyutuna Göre Uyarlanan Bir Kart Bileşeni

Hazırsan hemen koda geçelim. Önce HTML iskeletini oluşturup, sonra CSS ile container query’yi ekleyeceğiz. Adım adım gidersek kafası karışmaz 🎯

1️⃣ HTML yapısı — basit bir kart

<article class="card">
  <h2 class="title">Başlık</h2>
  <p class="content">
    Bu kart, içeriğinin genişliğine göre kendini ayarlar.
    Container queries sayesinde medya sorgusuna ihtiyaç duymadan
    bileşen seviyesinde responsive davranır.
  </p>
</article>

• <article class="card"> → kartımızın container olacak kök elemanı
• .title ve .content → içindekiler, container’ın boyutuna göre şekillenecek

2️⃣ CSS — container tanımı ve sorgu

/* 1️⃣ Kartı bir container yapıyoruz */
.card {
  container-type: inline-size;   /* inline‑size = genişlik bazlı */
  container-name: card;          /* isim verince daha okunaklı olur */
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1rem;
  background: #fafafa;
}

/* 2️⃣ 300 px ve üzeri genişlikte title büyüsün */
@container card (inline-size >= 300px) {
  .title {
    font-size: 1.5rem;
    font-weight: 700;
  }
}

/* 3️⃣ Küçük ekranlarda biraz daha kompakt */
@container card (inline-size < 300px) {
  .title {
    font-size: 1.1rem;
    font-weight: 500;
  }
  .content {
    font-size: 0.9rem;
  }
}

Ne oluyor burada?

• container-type: inline-size → .card artık container query için bir referans noktası.
• @container card (inline-size >= 300px) → kartın iç genişliği 300 px’i geçtiğinde .title’ın font‑size’ı 1.5 rem’e çıkar.
• Alt sınırda (< 300px) da daha küçük bir tipografi uyguluyoruz. Böylece kart kendi boyutuna göre karar veriyor, sayfa geneli değil 🙌

3️⃣ Tarayıcıda test et

1. Yukarıdaki HTML ve CSS’i bir index.html dosyasına yapıştır.
2. Tarayıcıda aç ve Developer Tools → Elements panelinden .card elementinin genişliğini elle değiştir (ör. width: 250px → width: 350px).
3. .title yazı boyutunun anında değiştiğini göreceksin ✨

İpucu: Container queries, bileşen tabanlı tasarımda medya sorgusundan kurtulmanı sağlar. Kartı nereye koyarsan koy, kendi içinde responsive olur 🛠

---

Özetle:

• HTML → <article class="card">…</article>
• CSS → .card { container-type: inline-size; container-name: card; }
• @container kuralları ile içeriğin genişliğine göre stil değiştir

Şimdi sen de kendi kart bileşenine container query ekleyip, farklı genişliklerde nasıl davrandığını deneyebilirsin. Keyifli kodlamalar! 🚀

---

❗️ Dikkat Edilmesi Gerekenler: Container Query Kullanırken Sık Yapılan Hatalar

Container query'ler harika bir araç ama yanlış kullanıldığında beklemediğiniz sürprizlerle karşılaşabilirsiniz 🎯. Ben de başlangıçta birkaç kez düşündüm, hadi en yaygın hataları ve nasıl kaçınacağınızı konuşalım.

1. Yanlış Container Tanımı 🛠

En klasik hata: container-type özelliğini parent element'e değil, child element'e vermek.

/* ❌ YANLIŞ — child'e verilmiş */
.card {
  container-type: inline-size;
}

/* ✅ DOĞRU — parent'e verilmeli */
.card-container {
  container-type: inline-size;
}

Ne oluyor burada? Container query, ancestor (ata) elementte tanımlanmalı. Child element kendini container olarak tanımlamaz; onun boyutunu izleyen taraf olur.

---

2. Yanlış Ölçüm Türü Seçimi 📏

container-type için iki ana değer var:

Değer	Ne Zaman Kullanılır?
inline-size	Genişlik (width) bazlı sorgulama — en yaygın
size	Hem genişlik hem yükseklik — performans maliyeti var

/* ❌ Gereksiz yere 'size' kullanmak */
.sidebar {
  container-type: size; /* Yükseklik de izleniyor, maliyetli */
}

/* ✅ Genelde 'inline-size' yeterli */
.sidebar {
  container-type: inline-size;
}

Püf noktası: Sadece genişlik sorguluyorsan inline-size yeterli. size tarayıcının layout hesaplamasını yavaşlatabilir ⚡.

---

3. Destek Eksikliği ve Fallback Stratejileri 🌐

Container query'ler modern tarayıcılarda destekleniyor ama eski sürümlerde (ör. Safari 15-, Firefox 105-) çalışmaz.

/* Fallback: media query ile yedek plan */
.card {
  /* Varsayılan stiller */
  padding: 1rem;
}

/* Modern tarayıcılar için container query */
@container (min-width: 400px) {
  .card {
    padding: 2rem;
  }
}

/* Eski tarayıcılar için media query fallback */
@media (min-width: 768px) {
  .card {
    padding: 2rem;
  }
}

Kural: Önce baseline (varsayılan) stilleri yaz, sonra @container ile enhance et, en son @media ile geniş ekran fallback'i ekle 🛡.

---

4. Debugging İpuçları 🔍

Tarayıcı konsolunda container query'nin tanınmadığını görürsen şuna benzer bir çıktı alırsın:

[Container Query] Unsupported at-rule: @container (min-width: 400px)

Bu genelde tarayıcı sürümü eski demektir. Chrome DevTools'da Elements panelinde container element'i seçiliyken, Styles sekmesinin altında "Container" badge'i görmüyorsan container-type tanımsızdır ❌.

Hızlı kontrol listesi:

• ✅ Parent element'e container-type verildi mi?
• ✅ @container kuralı doğru syntax'ta mı? (@container (min-width: 400px))
• ✅ Tarayıcı sürümü destekliyor mu? (caniuse.com/container-queries)
• ✅ Fallback media query var mı?

---

5. Küçük Ama Önemli Püf Noktalar 💡

• Named containers kullan: @container sidebar (min-width: 300px) — hangi container'ı hedeflediğin bell olur.
• container-name + container-type shorthand: container: sidebar / inline-size;
• Nested container'larda en yakın ancestor match olur — bu beklediğiniz davranış olmayabilir, isimlerle ayırın.
• Inline-style container-type (HTML'de style="container-type: inline-size") çalışmaz — CSS dosyasında veya <style> bloğunda olmalı.

---

Hazırsan bir sonraki bölümde gerçek bir proje örneğiyle container query'leri baştan sona kuracağız 🚀.

---

🛠 Modern Çözüm: :inline-size ile Dinamik Ayarlamalar

Hazırsanız container queries dünyasına bir adım daha atalım 🚀
Artık viewport boyutuna bakmak yerine, bileşenin kendi kapsayıcısına odaklanıyoruz. İşte bu noktada inline-size ve block-size devreye giriyor.

Neden inline-size / block-size? 🎯

• Yazım yönünden bağımsız çalışırlar (LTR, RTL, dikey yazım).
• width / height yerine mantıksal boyutlar sunarlar → daha az sürpriz, daha tutarlı davranış.
• Container type olarak size (hem inline hem block) ya da tek boyutlu inline-size / block-size seçebilirsiniz.

Hızlı bir özet ✅

Container Type	Ne Yapar?
size	Hem inline hem block boyutlarını izler.
inline-size	Sadece inline (yatay) boyutu takip eder.
block-size	Sadece block (dikey) boyutu takip eder.

İpucu: Çoğu bileşen için inline-size yeterlidir; dikey akış önemliyse block-size ekleyin.

Pratik CSS Snippet'i 🛠

/* Kapsayıcıyı tanımlıyoruz */
.card-container {
  container-type: inline-size;   /* ya da: size / block-size */
  container-name: card;          /* isim vererek hedefleme kolaylaşır */
}

/* Container query: kart 350px'den genişse düzeni değiştir */
@container card (inline-size >= 350px) {
  .card {
    display: flex;
    gap: 1rem;
    align-items: center;
  }

  .card__image {
    width: 120px;
    flex-shrink: 0;
  }
}

/* İsterseniz block-size ile de kontrol edebilirsiniz */
@container card (block-size >= 200px) {
  .card__description {
    font-size: 1.1rem;
    line-height: 1.5;
  }
}

Ne oluyor burada? 🤔

1. container-type: inline-size → Tarayıcı, .card-container elementinin inline boyutunu izlemeye başlar.
2. @container card (inline-size >= 350px) → Kapsayıcı 350 px'i geçtiğinde içindeki stiller devreye girer.
3. block-size sorgusu → Dikey alan büyüdüğünde (ör. accordion açıldığında) tipografi veya boşluk ayarlanabilir.

Küçük bir hatırlatma ❗️

• Container query'ler yine de container-type tanımlandığı elementin çocukları için geçerlidir.
• size kullanırsanız her iki eksen de izlenir → performans hafifçe artar, ihtiyacınız yoksa inline-size yeterli.

---

Özetle: Viewport'a bağlı statik @media sorgularından kurtulup, bileşenin kendi bağlamına göre tepki veren stiller yazıyoruz. inline-size / block-size ile mantıksal boyutları takip etmek, hem RTL/LTR hem de dikey yazım senaryolarında hayat kurtarıyor 🎉

---

🔁 Kapsayıcı İçerik Ayarlamaları ile Daha İyi Yanıt Veren Tasarımlar

Container queries, bir bileşenin kendi kapsayıcısının boyutuna göre stillendirilmesini sağlar.
Bu sayede sayfa geneli @media sorgularına bağlı kalmadan, bileşen kendi bağlamında esnek olur 🎯.

Neden tasarım sistemlerinde işe yarar?

• Utility class’lar (grid, flex, gap vb.) artık kapsayıcıya göre otomatik uyum sağlar.
• Katmanlı bileşenler (card, modal, dropdown) birbirine gömüldüğünde de bozulmaz.
• Navigation bar gibi tekrar eden yapılar, yan yanaya yerleştirildiğinde kendi alanına göre daralır/genişler ✅.

---

Pratik örnek: Kendi kapsayıcısına göre şekil alan Navbar 🚀

Aşağıda hem HTML hem CSS kodunu paylaşıyorum.
Navbar, container-type: inline-size ile bir container olur; menü öğeleri container-query sayesinde genişlik değiştikçe yakınlaştırılır veya açılır.

HTML

<nav class="navbar" role="navigation" aria-label="Ana menü">
  <div class="navbar__brand">Marka</div>
  <ul class="navbar__list">
    <li><a href="#">Ana Sayfa</a></li>
    <li><a href="#">Ürünler</a></li>
    <li><a href="#">Hakkımızda</a></li>
    <li><a href="#">İletişim</a></li>
  </ul>
</nav>

CSS (Container Queries)

/* 1️⃣ Navbar'ı bir container yap */
.navbar {
  container-type: inline-size;          /* genişlik bazlı sorgu */
  container-name: navbar;               /* isim verip daha net hedefleyelim */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: #1f2937;
  color: #fff;
}

/* 2️⃣ Varsayılan (geniş) düzen – yatay liste */
.navbar__list {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
}

/* 3️⃣ Kapsayıcı 600px altına düştüğünde: dikey, daraltılmış menü */
@container navbar (max-width: 600px) {
  .navbar__list {
    flex-direction: column;
    gap: 0.5rem;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #111827;
    padding: 1rem;
    border-top: 1px solid #374151;
  }

  .navbar__list a {
    display: block;
    padding: 0.5rem 0;
  }
}

/* 4️⃣ Çok dar alanlarda (ör. 350px) ikonlu hamburger menüye geçiş */
@container navbar (max-width: 350px) {
  .navbar__list {
    display: none;                      /* gizle, JS ile aç/kapa yapabilirsin */
  }
  .navbar__toggle {
    display: block;                     /* hamburger butonu görünür */
  }
}

Bu sayede ne oluyor?

• Navbar, yan yana duran bir sidebar içindeyse 600px’in altına düşer → menü dikey açılır.
• Mobilde 350px’in altına inerse → hamburger butonu devreye girer (JS ile toggle eklersin).
• Hiçbir @media sorgusu yazmadık; her şey kendi kapsayıcısına göre halledildi 🛠.

---

Küçük ipuçları ⛔

• container-type: inline-size çoğu durumda yeterlidir; size (her iki boyut) performans maliyeti getirebilir.
• container-name vermek, iç içe container’larda hangi kapsayıcıyı hedeflediğinizi netleştirir.
• Utility class’larınızı (.flex, .gap-4 vb.) container query içinde override ederek sistematik bir yaklaşıma ulaşırsınız.

Hazırsan bir sonraki adımda bu pattern’i grid tabanlı kart bileşenlerine nasıl taşıyacağımızı görelim 🚀.

---

Bonus Tavsiye: Container Queries'i Projenizde Nasıl Deneyebilirsiniz? 🚀

Hazırsan başlayalım! Container Queries artık modern tarayıcılarda native destekleniyor ama hala eski sürümlerde ya da özel bir stratejiyle polyfill kullanmak isteyebilirsiniz. İşte projenize sorunsuz eklemek için izleyebileceğiniz küçük bir yol haritası:

1️⃣ Yeni bileşenlerde başlayın

• Küçükten büyüğe gidin: Yeni bir kart, modal veya sidebar yazarken container query mantığıyla tasarlayın.
• Mevcut bileşenleri parça parça geçirin; böylece risk minimumda kalır.

2️⃣ Temelleri öğrenin 📚

• container-type, container-name ve @container sözdizimini ezberlemek yerine pratik yapın.
• MDN ve Chrome DevTools'daki Container Queries panelini açarak canlı deneyin.

3️⃣ Polyfill entegrasyonu 🛠

Eski tarayıcılar için container-query-polyfill paketini ekleyebilirsiniz. Webpack / Vite kullanıyorsanız style-loader ile CSS’inize otomatik enjekte edebilirsiniz.

// scripts/add-container-polyfill.js
const fs = require('fs');
const path = require('path');

// 1️⃣ Polyfill dosyasını indir (npm i container-query-polyfill)
const polyfillPath = path.resolve(
  __dirname,
  '../node_modules/container-query-polyfill/dist/container-query-polyfill.global.js'
);

// 2️⃣ Ana CSS/JS giriş dosyanızı bulun
const entryFile = path.resolve(__dirname, '../src/index.js'); // veya main.js

// 3️⃣ Polyfill'i en başa ekle
const polyfillCode = fs.readFileSync(polyfillPath, 'utf8');
const entryCode = fs.readFileSync(entryFile, 'utf8');

if (!entryCode.includes('container-query-polyfill')) {
  const newEntry = `${polyfillCode}\n${entryCode}`;
  fs.writeFileSync(entryFile, newEntry);
  console.log('✅ Polyfill başarıyla eklendi!');
} else {
  console.log('ℹ️ Polyfill zaten mevcut, atlandı.');
}

Nasıl çalışıyor?

1. npm i container-query-polyfill ile paketi kurun.
2. Yukarıdaki scripti package.json içindeki prepare ya da dev scriptine ekleyin:

"scripts": {
  "dev": "node scripts/add-container-polyfill.js && vite",
  "build": "node scripts/add-container-polyfill.js && vite build"
}

Böylece her npm run dev / npm run build çalıştığında polyfill otomatik enjekte edilir. 🎉

4️⃣ Performansı gözden kaçırmayın ⚡

• Sadece ihtiyaç duyulan bileşenlerde container-type: inline-size tanımlayın.
• Polyfill boyutu ~2 KB (gzipped) — lazy-load ederseniz ilk yüklenmeyi etkilemez.
• Chrome DevTools Performance panelinde “Container Query” etiketini filtreleyerek tarama süresini izleyin.

---

🎯 Son söz

Container Queries artık production-ready. Küçük bir bileşenden başlayın, polyfill’i bir kez ekleyin ve tarayıcı desteği arttıkça native kullanıma geçin. Kodunuz daha modüler, bakımı daha kolay ve tasarım sisteminiz gerçekten responsive hale gelecek.

Hadi, şimdi bir tane kart bileşeni yazıp @container kuralını deneyin! 🚀

---

Son Söz: Bileşen Odaklı Tasarımde Bağlamın Gücü 🎯

Arkadaşlar, uzun bir yol katettik. Container queries'i tanıdık, nasıl çalıştığını anladık, gerçek hayat senaryolarında nasıl hayat kurtardığını gördük. Şimdi durup bir nefes alıp, neden bu kadar önemli olduğunu özetleyelim.

Neden Container Queries Oyun Değiştirici? 🔁

• Bağlam artık bir kısıtlama değil, bir yetenek — Bileşenler "neredeysem oraya uyum sağlarım" diyor artık. Viewport'ın ne olduğunu umursamıyorlar, kendi kapsayıcılarının boyutlarına bakıyorlar. Bu, gerçek bileşen odaklı tasarım demek.
• Yeniden kullanılabilirlik zirveye çıktı — Aynı kart bileşenini sidebar'da, ana içerikte, bir modalda veya grid hücresinde kullanıyorsun. Her yerde kendini en iyi şekilde ifade ediyor. CSS yazarken "bu bileşen nereye gidecek?" diye kafayı yemiyorsun artık ❗️
• Medya sorgularının yükü omuzlarından kalktı — Global breakpoint'lerle boğuşmak yerine, mikro düzen kararlarını bileşenin kendisine bırakıyorsun. Kod daha temiz, daha öngörülebilir, daha maintainable hale geliyor ✅
• Tasarım sistemleri için doğal bir uyum — Design token'ların, bileşen varyantlarının ve responsive davranışların tek bir yerde, bileşenin içinde yaşadığı bir dünya. Bu da tutarlılığı artırıyor, sürprizleri azaltıyor 🛠

Pratikte Ne Değişir? 💡

Önce: "Bu kart 320px'te tek sütun, 768px'te iki sütun, 1024px'te üç sütun olmalı — ama sidebar'da nasıl davranacak?"
Sonra: "Bu kart, kapsayıcısı 300px altındaysa dikey, 300-500px arasıysa yatay, 500px üzeriyse grid modunda gelsin."

Fark hissettiniz mi? Karar mekanizması bileşene ait. Bu, hem geliştirici deneyimini (DX) hem de tasarım tutarlılığını aynı anda yükseltiyor.

Son Bir Not ❤️

Container queries sadece bir CSS özelliği değil — bileşen odaklı düşünmenin tarayıcı tarafındaki yansıması. Artık "sayfa düzeni" değil, "bileşen davranışı" kodluyoruz. Bu zihniyet değişimi, frontend mimarimizi kökten şeffaflaştırıyor.

Hazırsan bu felsefeyi bir sonraki projene taşıyalım. Kodunuzun, tasarımınızın ve ekibiniz için ne kadar rahatlatıcı olacağını göreceksiniz. 🚀

Mutlu kodlamalar!

---

Bu içerik tamamen yapay zeka destekli otomasyon sistemi ile üretilmiştir.