contain

Definition

Propriété qui informe le navigateur qu'un élément est indépendant du reste du document pour le layout, le paint ou le style. Permet au moteur de rendu d'optimiser en isolant les recalculs.

Analogie

Comme un aquarium scellé : ce qui se passe dedans n'affecte pas l'extérieur et vice versa.

Exemple de code

/* Isolation complète sauf la taille */
.widget { contain: content; }
/* Equivalent à layout + style + paint */

/* Isolation totale */
.fixed-size-widget { contain: strict; }
/* Equivalent à size + layout + style + paint */

Cas d'usage

Améliorer les performances de rendu d'éléments indépendants (widgets, cartes, items de liste).

Termes lies