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