CSS Container Queries, web geliştiricilere bileşenin kapsayıcısının boyutuna göre stil tanımlama imkanı verir. Geleneksel medya sorguları tüm viewport'a bağlıyken, container queries bir elemanın ebeveyn kutusunun genişliği, yüksekliği veya stiline göre koşullu CSS uygular. Bu sayede, yeniden kullanılabilir bileşenler oluşturmak ve karmaşık düzenleri yönetmek çok daha kolay hale gelir.
Container Queries Nedir ve Ne Zaman Kullanılmalıdır?
Container queries, bir container context oluşturarak, o context'in boyut değişikliklerine tepki verir. Örneğin, bir kart bileşeni, onu saran sütunun genişliği 400 pikselin altına düştüğünde yataydan dikey düzene geçebilir. Bu özellik, özellikle dashboard'lar, kart tabanlı arayüzler ve karmaşık grid sistemlerinde büyük esneklik sağlar.
Pratik İpuçları
- Container oluştururken
containözelliğini doğru ayarlayın:contain: layout inline-size;veyacontain: size style layout;gibi değerler kullanarak container'ın hangi boyutlara tepki vereceğini belirleyin. Inline-size, genişliğe duyarlı sorgular için yeterlidir. - Named containers kullanın: Birden fazla container türünüz varsa
container-nameile isimlendirin. Örneğin:container: sidebar / inline-size;. - Container query length birimlerini (cqw, cqh, cqi, cqmin) öğrenin: Bu birimler, container'ın boyutuna göre oransal değerler almanızı sağlar. Örneğin,
font-size: 3cqi;(container'ın inline boyutunun %3'ü). - Fallback sağlayın: Container queries tarayıcı desteği 2026 itibarıyla yaygın olsa da, eski tarayıcılar için medya sorguları veya
@supports (container-type: inline-size)ile kontrol ederek yedek stiller yazın. - Performans için container sorgularını aşırı kullanmayın: Her bileşen için container oluşturmak yerine, sadece gerçekten boyuta duyarlı olması gereken bileşenlere uygulayın. Bu, Web Workers ile JavaScript'te Arka Plan İşlemleri yazısında da değindiğimiz gibi, performansı doğrudan etkiler.
- İç içe geçmiş container'lara dikkat edin: Bir container başka bir container içindeyse, sorgular en yakın container'a göre çalışır.
container-nameile hangi container'a atıfta bulunacağınızı netleştirin.
Kontrol Listesi (Checklist)
- Container context oluşturuldu mu? (
container-type: inline-size;veyacontainile) ✅ - Container'a bir isim verildi mi? (İsimlendirme gerekiyorsa) ✅
- Container sorgusu doğru boyut özelliğine göre yazıldı mı? (
@container (min-width: 400px)gibi) ✅ - Container query length birimleri (cqw, cqh, cqi) kullanıldı mı? ✅
- Fallback stilleri eklendi mi? (Medya sorguları veya
@supportsile) ✅ - İç içe container senaryosu test edildi mi? ✅
- Performans testi yapıldı mı? (Aşırı container kullanımından kaçınıldı mı?) ✅
- Tarayıcı uyumluluğu kontrol edildi mi? (Can I Use vb.) ✅
Sık Yapılan Hatalar
- Container tipini yanlış ayarlamak:
container-type: inline-size;yerinesizekullanmak, hem genişlik hem yükseklik için container oluşturur ancak gereksiz yeniden hesaplamalara yol açar. İhtiyacınız inline-size ise sadece onu kullanın. - Container query'i medya sorgusuyla karıştırmak: Container sorguları, viewport'a değil, doğrudan ebeveynin boyutuna bakar. Bu nedenle, global responsive tasarım yerine bileşen bazlı yaklaşım gerektirir.
- Stilleri fazla karmaşık hale getirmek: Çok sayıda breakpoint ve kapsamlı stil değişiklikleri, kodu zor yönetilir kılar. Basit ve okunabilir tutun.
- Yeterli test yapmamak: Farklı ekran boyutları ve container boyutlarında görsel olarak test edilmelidir. Otomatik test araçları kullanın.
İleri Seviye Kullanım: State Sorguları
CSS Container Queries sadece boyut değil, stil ve state sorguları da destekler. @container style(--theme: dark) gibi özel özelliklere göre stil değiştirebilirsiniz. Bu, tema ve kullanıcı tercihlerine duyarlı bileşenler oluşturmak için güçlü bir yöntemdir. Örneğin, karanlık modda kartın arka plan rengini değiştirmek için kullanılabilir.
Örnek Kullanım Senaryosu
Bir ürün kartı bileşeni düşünün. Bu kart, bir grid içinde bazen iki sütunlu, bazen üç sütunlu olabilir. Container queries ile kartın genişliği 300px altına düştüğünde yatay düzenden dikey düzene geçmesini sağlayabilirsiniz:
.card-container { container-type: inline-size; }@container (min-width: 300px) { .card { display: flex; flex-direction: row; } }@container (max-width: 299px) { .card { display: flex; flex-direction: column; } }Bu yaklaşım, medya sorgularına göre çok daha esnektir çünkü kartın boyutu, içinde bulunduğu container'a bağlı olarak değişir. Ayrıca, React'te Debounce ve Throttle Nasıl Uygulanır? yazısında olduğu gibi, olayların sıklığını yönetmek de performans için önemlidir; bu nedenle container queries ile boyut değişikliklerini dinlerken gereksiz yeniden hesaplamaları engellemek için throttle/funk kullanmayı düşünebilirsiniz.
Sonuç
CSS Container Queries, modern web geliştirmede responsive tasarımı bileşen düzeyine indirerek daha modüler ve bakımı kolay kod yazmanızı sağlar. Pratik ipuçlarını uygulayarak ve kontrol listesini takip ederek, projelerinizde bu güçlü özellikten en iyi şekilde yararlanabilirsiniz. Unutmayın, her yeni teknolojide olduğu gibi dikkatli planlama ve test süreci başarının anahtarıdır.
Sık Sorulan Sorular
CSS Container Queries ile medya sorguları arasındaki temel fark nedir?
Medya sorguları viewport boyutuna göre çalışırken, container queries bir elemanın ebeveyn containerının boyutuna tepki verir. Bu sayede bileşenler, içinde bulundukları bağlama göre bağımsız olarak uyum sağlar.
Container Queries için hangi tarayıcılar destek sağlıyor?
2026 itibarıyla tüm modern tarayıcılar (Chrome, Firefox, Safari, Edge) container queries'i desteklemektedir. Ancak eski sürümler için fallback sağlamak gerekir.
Container query length birimlerini nasıl kullanmalıyım?
cqi (container inline size), cqw (container width), cqh (container height) gibi birimler, containerın boyutuna göre oransal değerler almanızı sağlar. Örneğin font-size: 3cqi; ifadesi, container genişliğinin %3'ü kadar font boyutu verir.
Birden fazla container adlandırmak zorunlu mu?
Hayır, tek bir container türü varsa isim vermek zorunlu değildir. Ancak farklı containerlarınız varsa, her birine container-name atayarak hangi sorgunun hangi container'a ait olduğunu belirtmeniz gerekir.
Container queries performansı nasıl etkiler?
Doğru kullanıldığında performans üzerinde olumlu etkisi olur çünkü stiller yalnızca container boyutu değiştiğinde yeniden hesaplanır. Ancak çok fazla container oluşturmak veya karmaşık sorgular yazmak performansı olumsuz etkileyebilir.
