Bileşenin tüm ekran genişliğine göre değil, içine konulduğu ebeveyn kutunun (Container) genişliğine göre stil değiştirmesini sağlayan devrimsel CSS özelliğidir.
\n\nNasıl Çalışır ve Temel Prensipleri Nelerdir?
\n@container (min-width: 400px) { ... } kuralı ile bileşen bağımsız olarak responsive hale gelir.
\n\nNeden Kritik Öneme Sahiptir?
\nAynı kart bileşeninin dar yan menüde (sidebar) dikey, geniş ana alanda ise yatay olarak otomatik uyum sağlamasını mümkün kılar.
\n\nEn İyi Uygulama ve Kullanım İpuçları
\nBileşen tabanlı tasarım sistemlerinde (Design System) ve mikro ön yüzlerde ekran yerine Container Queries kullanın.
\n\nSık Yapılan Hatalar ve Kaçınılması Gerekenler
\nEbeveyn elemana 'container-type: inline-size;' tanımlamayı unutarak sorgunun çalışmamasına yol açmak.
Sıkça Sorulan Sorular (SSS)
Container Queries Nedir? (CSS Kapsayıcı Sorguları) hakkında en sık yöneltilen sorular ve mühendislik ekibimizin uzman yanıtları:
Sayfa genel mizanpajı için Media Queries; bağımsız bileşenler için Container Queries kullanılır.
Tüm modern tarayıcılarda %95+ oranında desteklenmektedir.