Container-type derinlemesine
container-type: inline-size ve size değerlerini öğrenirsin.
container-type: size ile iki eksen
Şimdiye kadar container-type: inline-size kullandın; yalnızca yatay ekseni sorguya açar. size değeri ise her iki ekseni birden açar; böylece @container (min-height: 240px) gibi dikey koşullar da çalışır.
Bunun bir bedeli vardır: size alan öğe, kendi yüksekliğini içerikten belirleyemez; yükseklik dışarıdan verilmiş olmalı. Aksi halde döngü doğar: yükseklik hem sorgulanır hem de sorguya göre değişir.
Çoğunlukla inline-size yeter; size'ı yalnızca gerçekten yükseklik sorgusu gerektiğinde ver.
size'ın getirdiği kısıt
container-type: size verdiğinde tarayıcı, öğeye contain: size uygular. Bu, öğenin boyutunun içerikten değil, dışarıdan belirlenmesini sağlar; yükseklik ve genişlik artık içerikle büyümez.
Pratik etkisi: öğeye sabit bir yükseklik vermezsen ya da bir üst ögenin ızgarasında yer almazsa, yükseklik sıfıra çöker. Bu yüzden size kullandığın kabı, ızgara hücresi ya da sabit yükseklikli bir kapsayıcı içine yerleştir.
Uygulama Yükseklik sorgusu yaz
.banner seçicisine container-type: size ver. Ardından @container (min-height: 240px) sorgusu içinde .banner-in alt seçicisine padding: 32px tanımla. Böylece dar ve alçak kabda az, yüksek kabda çok dolgu oluşur.
Örnek çözümü göster
/* banner her iki eksende sorguya açık */
/* dar ve yüksek kabda dolgu artsın */
.banner {
container-type: size;
}
@container (min-height: 240px) {
.banner-in {
padding: 32px;
}
}Kendini test et
-
Hangi değer her iki ekseni de sorguya açar?
- container-type: size
- container-type: inline-size
- container-type: both
- container-type: width-height
Cevabı göster
container-type: size — Doğru. size değeri yatay ve dikey eksenleri birlikte sorguya açar.
-
Yükseklik sorgusu için değeri yaz
.widget { container-type: ____; }Cevabı göster
.widget { container-type: size; } -
Container-type değerlerini eşleştir
- inline-size
- Yatay ekseni ölçer
- size
- İki ekseni de ölçer
- normal
- Sorguya kapalıdır
- container-type
- Kabı sorguya açar