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.

Valeur initialenone
Applicabilitétous les éléments
Héritéefalse
Médiatous
Valeur calculéecomme spécifié
Type d'animationdiscrète
Ordre canoniqueper grammar

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

Spécification État Commentaires
CSS Containment Module Level 3 Brouillon de l'éditeur Initial definition

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support simple 52.0 Pas de support[1] ? 40 ?
Fonctionnalité Android Android Webview Firefox Mobile (Gecko) Firefox OS IE Mobile Opera Mobile Safari Mobile Chrome pour Android
Support simple Pas de support 52.0 Pas de support[1] ? ? 40 ? 52.0

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

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : SphinxKnight, vdesdoigts
 Dernière mise à jour par : SphinxKnight,