contain

La propriété contain permet à un auteur d'indiquer qu'un élément et son contenu sont, autant que possible, indépendant du reste de l'arbre représentant le document. Cela permet au navigateur de recalculer la disposition, la mise en forme, les couleurs et la taille (ou une combinaison de ces éléments) pour une portion limitée du DOM plutôt que pour la page entière. Cette propriété est notamment utile pour les pages qui contiennent de nombreux widgets qui sont tous indépendants car cela permet au moteur de rendu de ne modifier que ce qui est nécessaire sur la page.

Syntaxe

/* Aucun confinement */
contain: none;

/* Le confinement est activé pour la disposition */
/* le style, la "peinture", et la taille.        */
contain: strict;

/* Le confinement est activé pour la disposition */
/* le style, la "peinture".                      */
contain: content;

/* Le confinement est activé pour la taille d'un */
/* élément                                       */
contain: size;

/* Le confinement est activé pour la disposition */
/* d'un élément.                                 */
contain: layout;

/* Le confinement est activé pour le style d'un */
/* élément */
contain: style;

/* Le confinement est activé pour la "peinture" */
/*   de l'élément                                 */
contain: paint;

Valeurs

none

Le rendu de l'élément est calculé normalement, aucun confinement n'est appliqué.

strict

Cette valeur indique que toutes les règles de confinement s'appliquent sur l'élément. Cette valeur est équivalente à la notation contain: size layout style paint.

content

Cette valeur indique que toutes les règles de confinement sont appliquées sauf celle qui concerne la taille (size) de l'élément. Cette valeur est équivalente à la notation contain: layout style paint.

size

Cette valeur indique que l'élément peut être dimensionné sans qu'il soit nécessaire d'examiner ses descendants pour des modifications de taille.

layout

Cette valeur indique que rien en dehors de l'élément n'aura d'impact sur la disposition interne et vice versa.

style

Cette valeur indique que pour les propriétés qui s'appliquent à plus d'un élément et à ses descendants, l'effet ne s'étendra pas en dehors de l'élément englobant.

paint

Cette valeur indique que les éléments descendants de l'élément ne dépassent pas de ses limites. Si un élément est en dehors de l'écran ou n'est pas visible pour une autre raison, on aura la garantie qu'aucun de ses éléments descendants ne sera visible.

Syntaxe formelle

none | strict | content | [ size || layout || style || paint ]

Spécifications

Compatibilité des navigateurs

[1] Cette fonctionnalité n'est pas encore implémentée à l'heure actuelle. Cf. bug 1150081.