Containment

Definition

Propriété contain qui isole un sous-arbre du DOM pour le layout, le style et le painting. Le navigateur peut optimiser le rendu en sachant que les changements ne déborderont pas.

Analogie

Comme des murs coupe-feu dans un bâtiment : un incendie dans une zone n'affecte pas les autres.

Exemple de code

.widget {
  contain: layout style paint;
}
/* Raccourci pour tout sauf size */
.card {
  contain: content;
}
/* Strict = size + content */
.isolated { contain: strict; }

Cas d'usage

Optimiser les performances de rendu de composants indépendants dans un dashboard ou un feed infini.

Termes lies