Container Query’leri Media Query Gibi Kullanmayı Bırakın

Container query, bir elemente stil uygularken viewport genişliği yerine o elementin kendi kapsayıcısının (container) boyutunu temel alan bir CSS özelliğidir. Yani “ekran ne kadar geniş?” değil, “bu bileşenin içinde bulunduğu kutu ne kadar yer veriyor?” sorusuna cevap verir.

Sorun şu ki çoğu geliştirici container query’i öğrendiğinde onu birebir media query’nin yerine koyuyor — aynı sözdizimine benzediği için sayfa genişliğine göre stil değiştirmek amacıyla kullanıyor. Smashing Magazine’de Victor Ayomipo’nun 16 Eylül 2026’da yayımlanan makalesi, tam olarak bu alışkanlığın container query’lerin asıl gücünü boşa harcadığını anlatıyor.

Media Query Dışa Bakar, Container Query İçe Bakar

Media query, tarayıcı penceresinin genişliğini sorar: “Viewport 768px’in altında mı?” Bu, sayfa genelinde geçerli bir “makro” karardır — navigasyon menüsü, sayfa grid’i, genel düzen gibi şeylerde işe yarar.

Container query ise tamamen farklı bir soru sorar: “Benim içinde bulunduğum kapsayıcı ne kadar geniş?” Bu fark, aynı bileşen sayfanın farklı yerlerinde (tam genişlikte bir grid’de, dar bir sidebar’da, bir modal içinde) kullanıldığında kritikleşir. Media query ile o bileşen her zaman viewport’a göre davranır; oysa gerçekte ihtiyacı olan, kendi bulunduğu alana göre davranmaktır.

Ayomipo bunu makalede “makro” (sayfa düzeyi) ve “mikro” (bileşen düzeyi) düzen ayrımı olarak tanımlıyor: viewport sorguları sayfanın tamamını ilgilendiren kararlar için, container sorguları ise yeniden kullanılabilir, taşınabilir bileşenler için var.

Container Query Nasıl Kurulur

Bir elementi container query için “dinlenebilir” hale getirmek üzere önce onu bir containment context olarak işaretlemeniz gerekir:

.card-wrapper {
  container-name: card;
  container-type: inline-size;
}

container-type: inline-size, container’ın satır yönündeki (genelde yatay) boyutunu izlemeye alır. Bunu adlandırdıktan sonra, o kapsayıcının çocuklarına şu şekilde stil uygulayabilirsiniz:

@container card (min-width: 450px) {
  .card {
    display: flex;
    flex-direction: row;
  }
}

Burada kritik nokta şu: bir element kendi container’ını sorgulayamaz — sorguladığınız kapsayıcı her zaman bir üst (ata) element olmalı. Bu yüzden çoğu pratik kullanımda ekstra bir “wrapper” element eklemeniz gerekir; bu, container query’lerin en sık gözden kaçan pratik kısıtlarından biri.

Örnek: Bileşen İçinde Akışkan Tipografi

Container query’lerin gerçek gücü, container query birimleriyle (cqw, cqh, cqi, cqb) birleştiğinde ortaya çıkıyor. Bu birimler viewport’a değil, kapsayıcının kendi boyutuna göre ölçeklenir:

.card-title {
  font-size: clamp(1rem, .5rem + 3cqi, 2rem);
}

Bu satır, kart başlığının font boyutunu kartın kendi genişliğine göre akışkan hale getiriyor — kart ister bir üç sütunlu grid’de ister dar bir sidebar’da olsun, tipografi orana göre otomatik ölçekleniyor. MDN’in container query dokümantasyonu bu birimleri şöyle tanımlıyor: cqi kapsayıcının inline (satır) boyutunun %1’i, cqb ise block (blok) boyutunun %1’idir; cqmin/cqmax bu ikisinin küçüğünü/büyüğünü verir.

Örnek: Flexbox Satır Kaydırma Tespiti

İkinci pratik örnek, bir flex öğesinin kendi genişliğine göre iç düzenini değiştirmesi:

.flex-item {
  container-type: inline-size;
  flex: 1 1 390px;
}

@container (min-width: 600px) {
  .card {
    flex-direction: row;
  }
}

Burada kart, flex satırı kaç sütuna sardığından bağımsız olarak, sadece kendi hücresinin genişliği 600px’i geçtiğinde yatay düzene geçiyor. Media query ile bunu yapmak neredeyse imkânsız çünkü viewport genişliği, tek bir flex öğesinin gerçek genişliği hakkında hiçbir şey söylemez.

Container Query’lerin Bilinmesi Gereken Yan Etkileri

Makale üç somut kısıtlamaya dikkat çekiyor:

• Ekstra wrapper zorunluluğu: Bir element kendi container’ını sorgulayamadığı için ek bir sarmalayıcı element gerekir; bu, DOM’a fazladan bir katman ekler.
• container-type: size düzeni çökertebilir: Hem yatay hem dikey boyutu izlemek istediğinizde (size değeri), kapsayıcıya açık bir yükseklik vermezseniz block-size containment içerik yüksekliğini sıfırlayıp düzeni çökertebilir. Pratikte çoğu durumda inline-size yeterli ve daha güvenli.
• Custom property (var()) desteklenmiyor: @container koşulları içinde CSS custom property’leri kullanamazsınız; sorgu değerleri sabit olmalı, cascade karmaşıklığı buna izin vermiyor.

Ne Zaman Hangisini Kullanmalı

• Media query kullanın: sayfa genelinde geçerli, viewport’a bağlı kararlar için — ana navigasyon, sayfa grid’i, header/footer düzeni gibi.
• Container query kullanın: birden fazla bağlamda (grid, sidebar, modal) yeniden kullanılan, kendi başına taşınabilir bileşenler için — kart, widget, ürün öğesi gibi.

İkisi birbirini dışlamaz; aynı proje içinde, hatta aynı bileşende bile birlikte kullanılabilirler.

Tarayıcı Desteği

Boyut tabanlı (size) container query’ler Chrome/Edge 105, Firefox 110 ve Safari 16 sürümlerinden itibaren destekleniyor ve 2024’te “Baseline: Widely Available” statüsüne ulaştı. Smashing Magazine makalesi güncel küresel tarayıcı desteğinin yaklaşık %94 olduğunu belirtiyor; buna rağmen State of CSS 2025 anketine göre geliştiricilerin sadece %41,4’ü container query’leri aktif olarak kullanıyor. Yani teknik engel değil, alışkanlık ve farkındalık eksikliği asıl sorun.

Sonuç

Container query’leri “media query’nin küçük kardeşi” gibi görmek, onların asıl amacını kaçırmak demek. Media query sayfayı, container query ise bileşeni düşünür. Bir kartı, bir widget’ı veya tekrar kullanılabilir herhangi bir parçayı tasarlarken “bu viewport’ta nasıl görünsün” yerine “bu ne kadar yer bulursa nasıl davransın” sorusunu sormak, gerçek bileşen tabanlı responsive tasarımın başlangıç noktası.

Sık Sorulan Sorular

Container query hangi tarayıcılarda çalışıyor?
Boyut tabanlı container query’ler Chrome/Edge 105+, Firefox 110+ ve Safari 16+ sürümlerinde destekleniyor. 2024’te “Baseline: Widely Available” seviyesine ulaştı ve küresel destek yaklaşık %94 seviyesinde; production’da güvenle kullanılabilir.

Container query ile media query aynı anda kullanılabilir mi?
Evet, ikisi birbirini dışlamaz. Sayfa genelindeki düzen kararlarını media query ile, tekrar kullanılabilir bileşenlerin iç düzenini container query ile yönetmek yaygın ve önerilen bir yaklaşım.

Container query neden var, media query yetmiyor mu?
Media query sadece viewport genişliğini bilir; bir bileşenin sayfanın neresinde, ne kadar dar veya geniş bir alanda olduğunu bilemez. Container query ise bileşenin kendi kapsayıcısının boyutuna bakar, bu yüzden aynı bileşen farklı bağlamlarda doğru şekilde tepki verebilir.

Container query kullanmak için mutlaka ekstra bir wrapper element mi eklemem gerekiyor?
Çoğu durumda evet. Bir element kendi container’ını sorgulayamadığından, container-type tanımlanan element ile sorgulanan element aynı olamaz — bu yüzden pratikte bir üst sarmalayıcı elemente ihtiyaç duyulur.

Container query’lerde CSS custom property (değişken) kullanabilir miyim?
Hayır, @container koşulları içinde var() ile tanımlanmış custom property’ler desteklenmiyor. Sorgu eşik değerlerinin sabit (statik) olması gerekiyor.