Contain - Propriété CSS

Schéma syntaxique de contain.

Description de la propriété contain.

La propriété contain a pour objectif d'accélérer l'affichage des pages complexes, en indiquant au navigateur les actions qui ne devront pas obligatoirement être recalculées lorsqu'un élément est modifié. Par exemple, si les dimensions d'un éléments sont fixées, il n'est pas nécessaire de recalculer la position des éléments qui suivent, même si le contenu du premier élément vient à être modifié.

Imaginons une page composée de nombreux articles, chacun d'eux étant indépendant. C'est le cas d'un forum par exemple. Lorsqu'un article n'est pas visible sur la partie affichée de la page, il n'est pas nécessaire de calculer sa mise en page. Un article peut être invisible par exemple parce qu'il est en dessous de la partie affichée de la page, ou au contraire, parce qu'un défilement l'a fait disparaître vers le haut.

Dans l'exemple ci-dessous le bouton vous permet d'agrandir le premier article. Observez le travail que cela demande au navigateur : recomposition des trois colonnes, et, comme les lignes sont numérotées, renumérotation de l'ensemble des lignes de tous les articles.
Et notre exemple ne comporte que trois articles. Dans la réalité une page de forum peut comporter plusieurs centaines d'articles.

La propriété contain permet justement de faciliter le travail de mise en page, en indiquant au navigateur qu'il n'est pas nécessaire de mettre en page tel ou tel élément lorsqu'il n'est pas affiché, ou que les dimensions de certains éléments ne changeront pas, quelque soit le contenu. contain permet également de rendre locale une numérotation, afin d'éviter les renumérotations complètes.

Ces possibilités sont surtout intéressantes sur une page susceptible d'évoluer après son chargement : données récupérées en Ajax après le chargement de la page.

Valeurs pour contain.

• contain: none;

  La valeur none demande une mise en plage classique, sans optimisation. C'est la valeur par défaut.

• contain: layout;

  La valeur layout indique au navigateur que les descendants de l'élément concerné n'interagissent pas avec d'autres éléments de la page. Par exemple les éléments flottants n'interviendront pas sur le contenu des autres éléments de la page.
  D'autre part, l'élément devient la référence pour positionner les éléments fixés qui figureraient parmi ses descendants (position:fixed;).

  Dans l'exemple ci-après, le trait gris à gauche est une image positionnée en flottant. Le texte est un résumé de l'article, qui peut être plus ou moins long. Si la hauteur de l'image est supérieure à celle du résumé de l'article on voit que l'image empiète sur l'article suivant et qu'elle produit un décalage non désiré. D'autre part, il sera difficile de positionner la mention "Lire la suite" en bas à droite de chacun des blocs article.

  

  contain:none;
  
  Ceci est le résumé de l'article, susceptible d'être plus ou moins long.

  Lire la suite...
  

  contain:none;
  
  Ceci est le résumé de l'article, susceptible d'être plus ou moins long. L'article complet pouvant être consulté en cliquant sur le lien "Lire la suite".

  Lire la suite...

  Ci-dessous, la propriété contain de chacun des blocs article a été positionnée sur layout. Le problème du débordement de l'image est immédiatement résolu. Et d'autre part il est facile de positionner le lien "Lire à la suite" en bas à droite du bloc, puisque ce dernier est maintenant la référence de positionnement pour les éléments fixés (position:fixed;).

  

  contain:layout;
  
  Ceci est le résumé de l'article, susceptible d'être plus ou moins long.

  Lire la suite...
  

  contain:layout;
  
  Ceci est le résumé de l'article, susceptible d'être plus ou moins long. L'article complet pouvant être consulté en cliquant sur le lien "Lire la suite".

  Lire la suite...

  Rappelons que le rôle de la propriété contain est de réduire les calculs nécessaires à la mise en page. Dans notre exemple, si le contenu d'un bloc article vient à changer, le navigateur n'a pas besoin de recalculer la mise en page des autres articles.

• contain: style;

  Contrairement à ce que son nom laisserait penser, la valeur style n'a pas d'effet sur la mise en page, mais sur les compteurs. Elle indique au navigateur que l'élément ciblé aura sa propre numérotation, indépendante des autres numérotations de la page.

  Dans l'exemple ci-dessous, la propriété contain est appliquée à chacun des éléments colorés. On voit que, avec la valeur style, la numérotation des blocs est gérée de façon indépendante. Le but étant de réduire les calculs lorsque l'un des blocs est modifié.

  contain:none

  contain:style
• contain: paint;

  La valeur paint indique au navigateur que aucun descendant ne débordera le conteneur ciblé par contain:paint. Si le cas se produit cependant, la partie qui déborde ne sera pas restituée. Lorsque la mise en page a été calculée avec les dimensions initiales de l'élément, il ne sera donc plus nécessaire de refaire ce calcul.

  Exemple : l'image ci-dessous déborde son conteneur dont la hauteur a été fixée à 75 pixels. Comme le conteneur a été ciblé par contain:paint, la partie de l'image qui déborde n'est pas affichée.

  Un résultat visuel comparable aurait pu être obtenu avec la propriété overflow:hidden mais le but de contain est de permettre au navigateur d'optimiser les calculs.

  

  contain:paint;

• contain: size;

  Avec la valeur size la propriété contain demande au navigateur de calculer la mise en page sans tenir compte du contenu de l'élément, en ne considérant que les dimensions de l'élément lui même. Si les dimensions de l'élément ne sont pas définies, l'élément sera affiché comme un élément vide. Les dimensions peuvent être définies par les propriétés width et height, ou mieux, par les propriétés de la famille contain-intrinsic-size.

  Sur l'exemple ci-dessous, l'élément parent est en bleu. L'élément enfant (en vert) a une hauteur ajustable avec la souris, afin de simuler un contenu dynamique. La propriété contain:size est appliquée à l'élément parent.

  Dans le fonctionnement classique (contain:none) on voit que lorsque l'élément vert change de hauteur cela nécessite de repositionner tous les éléments qui suivent, jusqu'en bas de la page.

  contain:none;

  Appliquer la propriété contain avec la valeur size à l'élément parent, indique au navigateur qu'il n'est pas nécessaire de recalculer la mise en page des éléments qui suivent.

  contain:size;

  Cependant, des problèmes de superposition peuvent apparaître si le contenu de l'élément vert grandit trop. Cela peut se résoudre en appliquant également la propriété overflow:auto à l'élément parent.

  contain:size; overflow:auto;
• contain: inline-size;

• contain: strict;

  La valeur strict est un raccourci d'écriture équivalent à la combinaison de valeurs size layout paint style.

• contain: content;

  La valeur content est un raccourci d'écriture équivalent à la combinaison des trois valeurs layout paint style.

• contain: initial; (none) contain: inherit; contain: revert; contain: revertLayer; contain: unset;

  Ces valeurs sont décrites plus en détail sur leur page respective : initial, inherit, revert, revert-layer, unset.

Simulateur avec la propriété contain.

Pour le moment, ce simulateur ne fait rien. Mais vous pouvez quand même vérifier si la propriété et ses différentes valeurs sont reconnues par votre navigateur.

Prise en charge de contain par les navigateurs.

1

Propriété
contain

Estimation de la prise en charge globale.

94%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

Baidu Browser

QQ Browser

Opéra Mobile

Firefox

Chrome

Safari

Edge

Opéra

Chrome pour Androïd

Safari sur IOS

Samsung Internet

UC Browser pour Androïd

Androïd Brower

Firefox pour Androïd

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Historique de la propriété contain.

• Module CSS - Confinement - Niveau 1

  Introduction des techniques de confinement, et de la propriété contain.
  

  21 Février 2017

  Document de travail.

  

  08 Août 2017

  Candidat à la recommandation.

  

  15 Octobre 2019

  Proposé à la recommandation.

  

  21 Novembre 2019

  Recommandation.

• Module CSS - Confinement - Niveau 2

  Ajout de la valeur style pour la propriété contain.
  

  15 Octobre 2019

  Document de travail.

  

  

  

• Module CSS - Confinement - Niveau 3

  Ajout de nouvelles valeurs pour la propriété contain.
  

  21 Décembre 2021

  Document de travail.

  

  

  

Voir aussi, au sujet du confinement (containment).

La spécification CSS relative aux techniques de confinement est dénommée CSS Containment Module. La propriété contain est décrite dans ce module de la norme, ainsi que les définitions suivantes :

Propriétés :

Directives :