CSS Containment

CSS Containment memberi tahu browser bahwa sebuah elemen dan kontennya independen dari sisa halaman, sehingga browser bisa mengoptimasi rendering.

contain Property

/* Isolasi penuh — browser bisa skip banyak kalkulasi */
.card { contain: content; }

/* Hanya isolasi layout */
.sidebar { contain: layout; }

/* Isolasi paint — perubahan di dalam tidak trigger repaint luar */
.widget { contain: paint; }

content-visibility

Properti yang lebih powerful — skip rendering elemen off-screen sepenuhnya:

.article {
  content-visibility: auto;
  contain-intrinsic-size: 0 500px; /* estimated height */
}

Browser tidak akan render elemen sampai mendekati viewport. Untuk halaman dengan banyak konten (feed, article list), ini bisa mengurangi rendering time hingga 50%!

Kapan Menggunakan

• Long lists/feeds → content-visibility: auto
• Independent widgets (sidebar, card) → contain: content
• Modals/tooltips → contain: layout paint