CSS Container Queries: Responsive Tasarımda Yeni Dönem

Merhaba,

Yıllarca responsive tasarım demek viewport genişliğine göre stil değiştirmek demekti. Ama bu yaklaşımın bir sorunu vardı: Bir bileşenin bulunduğu container küçük olsa bile biz sadece ekran genişliğine bakabiliyorduk. Container Queries bu sorunu çözüyor.

Sorun Neydi?

Klasik bir senaryo düşünelim: Bir kart bileşeniniz var, bu kart bazen tam genişlikte, bazen sidebar'da dar bir alanda gösteriliyor. Media query ile "ekran 768px altındaysa şöyle göster" diyebiliyordunuz. Ama ekran 1200px iken kart sidebar'da dar alanda görünüyorsa? Media query bunu yakalayamıyor.

Container Queries ile artık şunu diyebiliyoruz: "Bu bileşen 400px'den dar bir alanda bulunuyorsa şöyle görünsün."

Nasıl Kullanılır?

/* Önce container tanımla */
.card-wrapper {
  container-type: inline-size;
  container-name: card;
}

/* Sonra container boyutuna göre stil yaz */
@container card (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

@container card (max-width: 399px) {
  .card {
    display: block;
  }
}

container-type Seçenekleri

• inline-size: Yatay boyutu izler (en yaygın kullanım)
• size: Hem yatay hem dikey boyutu izler
• normal: Container sorgusu yok ama stil mirası devam eder

Media Query ile Birlikte Kullanım

Container Queries, media query'lerin rakibi değil tamamlayıcısı. Genel sayfa düzeni için media query, bileşen düzeyinde uyum için container query kullanmak en sağlıklı yaklaşım arkadaşlar.

Tarayıcı Desteği

2023 itibarıyla tüm modern tarayıcılarda destekleniyor. Chrome 105, Firefox 110, Safari 16 ve üzeri sürümlerde sorunsuz çalışıyor. Türkiye kullanıcı kitlesi için endişelenmenizi gerektiren bir durum yok.

Gerçek Projede Kullanım

En çok işe yaradığı yer design system bileşenleri. Bir kart, bir alert kutusu, bir ürün listesi bileşenini bir kez yazıyorsunuz ve nereye koyarsanız koyun doğru görünüyor. Sayfanın kaç sütunlu olduğuyla uğraşmak zorunda kalmıyorsunuz. Bu gerçekten iş kolaylaştırıcı bir özellik :)

İyi Günler Dilerim.