Container queries
@container kuralını öğrenirsin.
@container nedir?
Medya sorguları ekran genişliğine bakar; oysa bir bileşenin gerçek kullanım alanı, içinde yer aldığı kutudur. @container bildirimi, içinde bulunulan kabın genişliğine göre biçim değişikliği yapar.
Önce kabı container-type: inline-size ile işaretlersin. Sonra @container (min-width: 400px) yazarak kabın genişliği 400 pikseli geçtiğinde uygulanacak stilleri verirsin. Bileşen artık ekranı değil, kabı dinler.
container-type: inline-size
Bir öğeyi kapsayıcı yapmak için container-type özelliğine değer verirsin. En yaygın değer inline-size'dır; bu, kabın satır içi (genişlik) boyutunu sorguya açar.
Bu bildirimi verdiğinde öğe, kendisini kullanan alt bileşenler için bir ölçü kaynağı olur. Bileşen, içinde bulunduğu genişliği okur ve stillerini buna göre ayarlar.
Uygulama Container sorgusu ile dolgu değiştir
.panel seçicisine container-type: inline-size ver. Ardından @container (min-width: 320px) sorgusu içinde .panel-in alt seçicisine padding: 24px tanımla. Böylece dar kabda az, geniş kabda çok dolgu oluşur.
Örnek çözümü göster
/* panel kabını aç */
/* geniş kabda iç dolgu artsın */
.panel {
container-type: inline-size;
}
@container (min-width: 320px) {
.panel-in {
padding: 24px;
}
}Kendini test et
-
Bir kabı container sorgusuna açan değer hangisidir?
- display: container
- container-name: main
- container-type: inline-size
- position: container
Cevabı göster
container-type: inline-size — Doğru. container-type: inline-size kabın genişliğini sorguya açar.
-
container-type değerini yaz
.panel { ____: inline-size; }Cevabı göster
.panel { container-type: inline-size; } -
Container parçalarını eşle
- @container
- Sorgu bildirimi
- container-type
- Kabı açar
- inline-size
- Genişliği ölçer
- min-width
- Eşik koşulu