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, la propriété contain peut indiquer qu'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é.

Cette propriété commence a être utile lorsque la page contient énormément de composants, susceptibles d'évoluer après leur chargement initial, par exemple par un processus Ajax.
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 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.
  

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

   

   

  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; ⚠

  La valeur inline-size est comparable à size mais dans le sens des lignes. Pour les langues latines, ce sera donc le sens horizontal.

• contain: content;

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

• contain: strict;

  La valeur strict est un raccourci d'écriture équivalent à la combinaison des valeurs size, layout, paint et 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.

Nous vous proposons plusieurs simulateurs car chacune des valeurs pour contain nécessite un exemple particulier. Les valeurs strict et content ne sont pas illustrées car elles sont équivalentes à plusieurs autres valeurs.

La gestion des débordements dans une série d'éléments flottants.

Ce premier simulateur illustre la valeur layout, qui est utile lorsqu'il y a des éléments flottants successifs. Dans l'exemple, ce sont les images des logos qui sont déclarées flottantes. Le texte qui les accompagne n'est pas suffisamment longs pour la hauteur de l'image. Dans ce cas, la deuxième image risque de se mettre à coté de l'image précédente. la valeur layout empêche cela.

Le logo de Chrome est flottant et le texte qui l'accompagne n'est pas suffisamment grand pour couvrir sa hauteur;

Ce deuxième logo se positionne également en flottant par rapport au premier, sauf avec la valeur layout.

L'effet de la valeur paint.

Ici c'est la valeur paint qui est illustrée. Le conteneur a une hauteur fixée inférieure à la hauteur de l'image. Avec la valeur paint on voit bien que l'image n'est pas affichée à l'extérieur du conteneur.

La hauteur de ce bloc est figée : l'image déborde du cadre.

L'effet de la valeur style.

Enfin, la valeur style, qui concerne la numérotation des listes. Par défaut la numérotation des listes est recalculée si de nouveaux éléments sont ajoutés de façon dynamique. La valeur style maintient les numéros déjà calculés.

Premier élément.
Deuxième élément.
Troisième élément.

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 :