Contain

contain ile render izolasyonunu öğrenirsin.

contain ile render izolasyonu

contain özelliği bir öğenin içindeki değişikliklerin dışarıyı etkilemesini engeller. Tarayıcı, o öğeyi izole bir kutu gibi değerlendirir ve dış öğeleri yeniden hesaplamaz.

Örneğin .card { contain: layout; } yazınca kartın iç düzeni değişse bile kardeş kartlar yeniden hesaplanmaz. Bu, uzun listelerde büyük kazanç sağlar.

Layout containment derinlemesine

Layout containment, bir öğenin iç boyutunun dışını etkilememesini sağlar. Kartın boyutu değişse bile kardeşleri yeniden hesaplanmaz. Uzun listede her kart bağımsız değerlendirilir.

contain: strict hem layout hem paint izolasyonu verir; contain: content bunlara style dahil her şeyi ekler ama size yok. Kart listeleri için content yaygın seçimdir.

Uygulama Kart listesine contain ekle

Aşağıdaki CSS'i tamamla. .card-list bildiriminde contain: content olsun. .card bildiriminde contain: layout paint ve will-change: transform bildirimleri olsun.

Örnek çözümü göster

/* kart listesi ve kart */
.card-list {
  contain: content;
}

.card {
  contain: layout paint;
  will-change: transform;
}

Kendini test et

contain: layout ne yapar?
- Karta arka plan verir
- Kartı gizler
- İç düzeni dışarıdan izole eder
- Kartı sayfanın üstüne taşır
Cevabı göster

İç düzeni dışarıdan izole eder — Doğru. contain: layout, kartın iç değişikliklerinin dış öğeleri etkilemesini engeller.

contain: layout paint değerini yaz

.card {
  /* layout ve paint izolasyonu */
  contain: ____;
}

Cevabı göster

.card {
  /* layout ve paint izolasyonu */
  contain: layout paint;
}

contain değerini anlamına eşle

layout

İç düzeni izole eder
paint

Pikselleri izole eder
strict

layout paint size beraber
content

strict gibi ama size yok
none

İzolasyon kapalı

Sıradaki ders: Özet - Hızlı kart listesi

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler