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