Contain - Propriété CSS
Résumé des caractéristiques de la propriété contain
none | strict | content | size | layout | paintnonecontain ne peut pas être animée.Schéma syntaxique de contain.
contain (Les liens du schéma donnent accès à plus de détails)Télécharger le schéma en SVG
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.
- Première ligne.
- Deuxième ligne.
- Troisième ligne.
- Première ligne.
- Deuxième ligne.
- Troisième ligne.
- Première ligne.
- Deuxième ligne.
- Troisième ligne.
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
nonedemande une mise en plage classique, sans optimisation. C'est la valeur par défaut. - contain: layout;
La valeur
layoutindique 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. L'article complet pouvant être consulté en cliquant sur le lien "Lire la suite".Ci-dessous, la propriété
containde chacun des blocs article a été positionnée surlayout. 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.
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".Rappelons que le rôle de la propriété
containest 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
stylen'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é
containest appliquée à chacun des éléments colorés. On voit que, avec la valeurstyle, 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:nonecontain:style - contain: paint;
La valeur
paintindique au navigateur que aucun descendant ne débordera le conteneur ciblé parcontain: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:hiddenmais le but decontainest de permettre au navigateur d'optimiser les calculs.
contain:paint; - contain: size;
Avec la valeur
sizela propriétécontaindemande 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éswidthetheight, ou mieux, par les propriétés de la famillecontain-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:sizeest 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é
containavec la valeursizeà 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
strictest un raccourci d'écriture équivalent à la combinaison de valeurssize layout paint style. - contain: content;
La valeur
contentest un raccourci d'écriture équivalent à la combinaison des trois valeurslayout paint style.
Valeurs communes :
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.
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 par les navigateurs (compatibilité).
containNavigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
UC Browser pour Androïd
Opéra mini
Voir aussi, dans le même module de standardisation que contain.
Les spécifications CSS éditées par le W3C sont organisées en modules. contain fait partie du module CSS - Confinement (CSS Containment Module). Les définitions suivantes sont également décrites dans ce même module.