Yıllardır responsive tasarımları tarayıcının genişliğine (Media Queries) göre şekillendirdik. Ancak modern bileşen tabanlı dünyada bu artık yetersiz kalıyor. CSS Container Queries sayesinde artık bileşenleri yer aldıkları kutunun boyutuna göre şekillendirebiliyoruz.
Media Queries vs Container Queries
Media Queries ekranın tamamına bakar. Örneğin ekran 768px'den küçükse yan menüyü gizle der. Container Queries ise bileşenin içinde bulunduğu ebeveyn (parent) konteynere odaklanır. Aynı bileşen, yan menüde dar bir kutuda farklı, ana içerikte geniş bir kutuda farklı görünebilir.
/* (c) CodeMareFi - codemarefi.com.tr */
/* Konteyneri tanımlama */
.card-container {
container-type: inline-size;
container-name: card;
}
/* Konteynerin genişliğine göre içerideki elemanı şekillendirme */
@container card (max-width: 400px) {
.card-item {
flex-direction: column;
padding: 10px;
}
}Neden Kullanmalıyız?
Bileşen kütüphaneleri (React, Next.js, Vue vb.) geliştirirken bileşenlerin nereye yerleştirileceğini önceden kestiremezsiniz. Container Queries, yazdığınız bir kart bileşeninin her ekranda ve her parent element içinde mükemmel şekilde uyum sağlamasını (true responsive) garantiler.