Container bileşenleri

Container queries ile tekrar kullanılabilir bileşen kurarsın.

Tekrar kullanılabilir bileşen

Bir kart bileşeni düşün: aynı kart, ana sütunda geniş, kenar çubuğunda dar, modalda orta boy görünmeli. Medya sorguları ekranı dinlediği için bu üç durumu tek CSS ile çözemezsin. Container sorguları ise bileşeni kapsülleyerek yalnızca içinde bulunduğu kabı dinler.

Böylece bileşen, yerleştirildiği yere göre uyum sağlar. Aynı HTML ve CSS, farklı kablarda farklı görünümler üretir; tekrar kullanım artar.

Kapsülleme ve sınır

Container bileşeni, dışarıdan gelen stillere karşı nispeten dirençlidir. İçerideki @container sorguları yalnızca bileşenin kendi kabına bakar; ebeveynden gelen yazı boyutu ya da renk değişimi iç sorguları bozmaz.

Bu, tasarım sisteminde tutarlılık sağlar. Ekip, bir bileşeni geliştirirken onun farklı kabda nasıl davranacağını bileşen dosyasından okur; başka dosyalara bakmaz.

Uygulama Tekrar kullanılabilir kart bileşeni

.product seçicisine container-type: inline-size ve container-name: product ver. Ardından @container product (min-width: 320px) sorgusu içinde .product-body alt seçicisine display: grid tanımla. Böylece ürün kartı dar kabda tek sütun, geniş kabda ızgara olarak dizilir.

Örnek çözümü göster

/* ürün kartı kabını aç ve adlandır */
/* geniş kabda gövde ızgaraya dönsün */
.product {
  container-type: inline-size;
  container-name: product;
}
@container product (min-width: 320px) {
  .product-body {
    display: grid;
  }
}

Kendini test et

Container bileşenlerinin temel avantajı nedir?
- Aynı bileşen farklı kabda farklı görünür
- Daha az HTML yazılır
- Daha hızlı JavaScript çalışır
- Tarayıcı bellek kullanımı azalır
Cevabı göster

Aynı bileşen farklı kabda farklı görünür — Doğru. Bileşen kaba göre uyum sağlar; ekran genişliğine göre değil.

Bileşen kabını tanımla

.product {
  container-type: ____;
  container-name: product;
}

Cevabı göster

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

Bileşen kavramlarını eşleştir

Kapsülleme

Bileşen kabı dinler
Miras değil

Ebeveyne değil kabına bakar
Bileşen yeniden kullanım

Aynı CSS farklı kabda
Duyarlı

Kaba göre biçim değiştirir

Sıradaki ders: Özet - Duyarlı widget sistemi

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler