CSS Container Queries ile Bileşen Bazlı Responsive Tasarım

Media query sayfanın viewport genişliğine bakar. Yeniden kullanılan bir kart ise geniş ekranda dar sidebar içinde, küçük ekranda tam genişlikte olabilir. Container query, bileşenin kendi kapsayıcısına ayrılan alana göre düzen değiştirmesini sağlar.

Kapsayıcıyı tanımlayın

.product-region {
  container-name: product;
  container-type: inline-size;
}

inline-size bileşenin yazı akışı yönündeki kullanılabilir genişliğini sorgulanabilir yapar. Sorgu, kapsayıcının kendisine değil onun içindeki öğelere uygulanır.

Kart düzenini kapsayıcı genişliğine göre değiştirin

.product-card {
  display: grid;
  gap: 1rem;
}

@container product (width >= 36rem) {
  .product-card {
    grid-template-columns: 12rem 1fr;
    align-items: center;
  }
}

Aynı kart ana içerikte yatay, sidebar içinde dikey kalabilir. Sayfanın toplam ekran genişliğini bilmesine gerek yoktur.

Container birimlerini ölçülü kullanın

.product-card__title {
  font-size: clamp(1.1rem, 4cqi, 2rem);
}

cqi, seçilen query container'ın inline boyutunun yüzde birine göre hesaplanır. Okunabilirlik için alt ve üst sınırı clamp() ile koruyun.

Media query tamamen ortadan kalkmaz

Kullanıcının renk şeması, hareket tercihi, giriş yöntemi veya tüm sayfa navigasyonu gibi viewport ve cihaz düzeyindeki kararlar media query için uygundur. Bileşenin yerel düzeni container query ile daha taşınabilir olur.

İç içe kapsayıcılarda isim kullanın

Bir bileşenin birden fazla query container atası varsa en yakın uygun kapsayıcı seçilir. Yanlış kapsayıcının kullanılmasını önlemek için container-name tanımlayıp @container product biçiminde açık seçim yapın.

Destek kontrolüyle geriye uyum ekleyin

@supports (container-type: inline-size) {
  .product-region { container-type: inline-size; }
}

Temel kart düzenini eski tarayıcılarda kullanılabilir bırakın; container query desteğini iyileştirme katmanı olarak ekleyin. Böylece bileşen CSS desteği olmadığında da içerik erişilebilir kalır.

Başvuru: W3C CSS Containment Level 3.