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

Sıradaki ders: Container-name

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler