Meydan okuma - Container sistemi

Container queries ile tekrar kullanılabilir widget sistemi kurarsın.

Container query ile widget

Bir .widget bileşeni, konulduğu kabın genişliğine göre yeniden biçimlenir. Kabı container-type: inline-size ile işaretlersin; istersen container-name: widget ile ad verirsin. Bileşen artık kabına göre duyarlıdır.

İçerideki başlığın yazı boyutunu font-size: clamp(1rem, 5cqi, 2rem) gibi bir bildirimle verirsin. cqi, kabın satır içi genişliğinin yüzde biridir. Böylece widget dar kabda küçük, geniş kabda büyük yazı gösterir; ekran genişliği önemli değildir.

Uygulama Widget container sistemini kur

Bir widget sistemi kur. .widget-host etiketinde container-type: inline-size ve container-name: widget bildirimleri olsun. .widget__title etiketinde font-size: clamp(1rem, 5cqi, 2rem) bildirimi olsun.

Örnek çözümü göster

/* widget kabı */
.widget-host {
  container-type: inline-size;
  container-name: widget;
}

/* widget başlığı */
.widget__title {
  font-size: clamp(1rem, 5cqi, 2rem);
}

Kendini test et

Bir kabı container query için işaretlemek için hangi bildirim kullanılır?
```
.widget-host {
  /* ??? */
}
```
- container: widget
- container-type: inline-size
- container-width: 100%
- display: container
Cevabı göster

container-type: inline-size — Doğru. container-type: inline-size kabı bir sorgu hedefi yapar; çocuklar @container ile kabın genişliğini izler.

container-type bildirimini yaz

.widget-host {
  ____;
  container-name: widget;
}

Cevabı göster

.widget-host {
  container-type: inline-size;
  container-name: widget;
}

Container kavramlarını eşleştir

container-type

Kabı işaretler
container-name

Kaba ad verir
cqi

Kabın satır içi yüzde biri
@container

Kaba yönelik sorgu

Sıradaki ders: Meydan okuma - View transitions

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler