La propriété CSScontain permet d'indiquer qu'un élément, ainsi que son contenu, sont, autant que possible, indépendants du reste de l'arbre du document. Cela permet au navigateur de recalculer la disposition, la mise en forme, la taille, lespeintures ou toute combinaison de ces éléments pour une zone donnée du DOM plutôt que pour la page complète.

/* Valeurs avec un mot-clé */contain: none;contain: strict;contain: content;contain: size;contain: layout;contain: style;contain: paint;/* Valeurs globales */contain: inherit;contain: initial;contain: unset;

Cette propriété s'avère utile pour les pages qui contiennent de nombreux composants indépendants et permet de limiter la portée des règles sur le reste de la page.

Syntaxe

Valeurs

none

L'élément est affiché normalement, aucun confinement n'est appliqué.

strict

Toutes les règles possibles de confinement à l'exception destyle sont appliquées. Cela correspond àcontain: size layout paint.

content

Toutes les règles de confinement, à l'exception de celles poursize etstyle, sont appliquées à l'élément. Cela est équivalent àcontain: layout paint.

size

Cette valeur indique que l'élément peut être dimensionné sans avoir à examiner les éléments descendants pour les modifications de la taille.

layout

Cette valeur indique qu'aucun élément en dehors de l'élément, ne peut impacter sa disposition interne et réciproquement.

style

Cette valeur indique que les propriétés ayant un effet sur un élément et ses descendants voire plus sont bien limitées à l'élément englobant.

paint

Cette valeur indique que les éléments descendants de l'élément ne sont pas affichés en dehors de ses limites. Si un élément est en dehors de l'écran ou n'est pas visible, cette valeur assure que les éléments descendants ne sont pas visibles non plus.

Définition formelle

Syntaxe formelle

contain =
none|
strict|
content|
[[size|inline-size]||layout||style||paint]|
view-transition

Spécifications

Compatibilité des navigateurs

Voir aussi

• La propriété CSSposition