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ı