contain

Exemple interactif

contain: none;

contain: size;

contain: layout;

contain: paint;

contain: strict;

<section class="default-example" id="default-example">
  <div class="card" id="example-element">
    <h2>Élément avec '<code>contain</code>'</h2>
    <p>
      Le poisson rouge est une espèce de poisson domestique connue pour ses
      couleurs vives et ses motifs.
    </p>
    <div class="fixed"><p>Fixé 4px à droite</p></div>
  </div>
</section>

h2 {
  margin-top: 0;
}

#default-example {
  text-align: left;
  padding: 4px;
  font-size: 16px;
}

.card {
  text-align: left;
  border: 3px dotted;
  padding: 20px;
  margin: 10px;
  width: 85%;
  min-height: 150px;
}

.fixed {
  position: fixed;
  border: 3px dotted;
  right: 4px;
  padding: 4px;
  margin: 4px;
}

Syntaxe

/* Valeurs avec un mot-clé */
contain: none;
contain: strict;
contain: content;
contain: size;
contain: inline-size;
contain: layout;
contain: style;
contain: paint;

/* Valeurs avec plusieurs mots-clés */
contain: size paint;
contain: size layout paint;
contain: inline-size layout;

/* Valeurs globales */
contain: inherit;
contain: initial;
contain: revert;
contain: revert-layer;
contain: unset;

Valeurs

La propriété contain peut prendre l'une des valeurs suivantes :

• Le mot-clé none ou
• Un ou plusieurs des mots-clés séparés par des espaces size (ou inline-size), layout, style et paint, dans n'importe quel ordre ou
• L'une des valeurs raccourcies strict ou content

Les mots-clés ont les significations suivantes :

none

L'élément est affiché normalement, aucune compartimentation n'est appliquée.

strict

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

content

Toutes les règles de compartimentation, à l'exception de celles pour size et style, 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. Cette valeur ne peut pas être combinée avec inline-size.

inline-size

La compartimentation de la taille en ligne est appliquée à l'élément. La taille en ligne de l'élément peut être calculée isolément, en ignorant les éléments enfants. Cette valeur ne peut pas être combinée avec size.

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.

Description

Il existe quatre types de compartimentation CSS : taille, mise en page, style et peinture, qui s'appliquent à l'élément englobant. La propriété est une liste de mots-clés séparés par des espaces, choisie parmi un sous-ensemble des cinq valeurs standard ou l'une des deux valeurs raccourcies. Les modifications des propriétés compartimentées à l'intérieur de l'élément ne se propagent pas en dehors de cet élément vers le reste de la page. Le principal avantage de la compartimentation est que le navigateur n'a pas à recalculer ni à réafficher aussi souvent le DOM ou la mise en page, ce qui entraîne de modestes gains de performance pour le rendu des pages statiques et des gains plus importants pour les applications dynamiques.

L'utilisation de la propriété contain est utile sur les pages comportant des groupes d'éléments censés être indépendants, car elle peut empêcher l'intérieur d'un élément d'avoir des effets secondaires en dehors de sa boîte de délimitation.

Définition formelle

Syntaxe formelle

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

Exemples

Compartimentation de peinture

L'exemple suivant montre comment utiliser contain: paint pour empêcher les descendants d'un élément de peindre en dehors de ses limites.

div {
  width: 100px;
  height: 100px;
  background: red;
  margin: 10px;
  font-size: 20px;
}

.contain-paint {
  contain: paint;
}

<div class="contain-paint">
  <p>Ce texte sera rogné aux limites de la boîte.</p>
</div>
<div>
  <p>Ce texte ne sera pas rogné aux limites de la boîte.</p>
</div>

Compartimentation de mise en page

L'exemple ci‑dessous montre comment les éléments se comportent avec et sans la compartimentation de mise en page.

<div class="card contain-layout">
  <h2>Carte 1</h2>
  <div class="fixed"><p>Boîte fixe 1</p></div>
  <div class="float"><p>Boîte flottante 1</p></div>
</div>
<div class="card">
  <h2>Carte 2</h2>
  <div class="fixed"><p>Boîte fixe 2</p></div>
  <div class="float"><p>Boîte flottante 2</p></div>
</div>
<div class="card">
  <h2>Carte 3</h2>
  <!-- ... -->
</div>

p {
  margin: 4px;
  padding: 4px;
}

h2 {
  margin-bottom: 4px;
  padding: 10px;
}

div {
  border-radius: 4px;
  box-shadow: 0 2px 4px 0 gray;
  padding: 6px;
  margin: 6px;
}

.card {
  width: 70%;
  height: 90px;
}

.fixed {
  position: fixed;
  right: 10px;
  top: 10px;
  background: coral;
}

.float {
  float: left;
  margin: 10px;
  background: aquamarine;
}

.contain-layout {
  contain: layout;
}

La première carte utilise la compartimentation, ce qui isole sa mise en page du reste de la page. On peut réutiliser cette carte à d'autres endroits de la page sans se préoccuper du recalcul de la mise en page des autres éléments. Si des éléments flottants chevauchent les limites de la carte, les éléments du reste de la page ne sont pas affectés. Lorsque le navigateur recalcule le sous‑arbre de l'élément englobant, seul cet élément est recalculé. Rien à l'extérieur de l'élément compartimenté n'a besoin d'être recalculé. De plus, la boîte fixe utilise la carte comme conteneur de mise en page pour se positionner.

La deuxième et la troisième carte n'ont pas de compartimentation. Le contexte de mise en page de la boîte fixe dans la deuxième carte est l'élément racine, de sorte que la boîte fixe est positionnée dans le coin supérieur droit de la page. Un flottant chevauche les limites de la deuxième carte, provoquant un décalage de mise en page inattendu sur la troisième carte, visible dans le positionnement de l'élément HTML <h2>. Lorsque le recalcul a lieu, il n'est pas limité à un conteneur. Cela affecte les performances et perturbe le reste de la mise en page.

Compartimentation de style

La compartimentation de style limite la portée des compteurs et des guillemets à l'élément compartimenté. Pour les compteurs CSS, les propriétés counter-increment et counter-set sont limitées à l'élément comme si celui‑ci était à la racine du document.

Compartimentation et compteurs

L'exemple ci‑dessous montre comment les compteurs fonctionnent lorsque la compartimentation de style est appliquée :

<ul>
  <li>Élément A</li>
  <li>Élément B</li>
  <li class="container">Élément C</li>
  <li>Élément D</li>
  <li>Élément E</li>
</ul>

body {
  counter-reset: list-items;
}

li::before {
  counter-increment: list-items;
  content: counter(list-items) " : ";
}

.container {
  contain: style;
}

Sans compartimentation, le compteur s'incrémente de 1 à 5 pour chaque élément de la liste. La compartimentation de style fait en sorte que la propriété counter-increment est limitée au sous‑arbre de l'élément et que le compteur recommence à 1 :

Compartimentation et guillemets

Les guillemets CSS sont également concernés, car les valeurs content relatives aux guillemets sont limitées à l'élément :

<!-- Avec la compartimentation de style -->
<span class="ouverture-citation">
  extérieur
  <span class="style-conteneur">
    <span class="ouverture-citation">intérieur</span>
  </span>
</span>
<span class="fermeture-citation">fermer</span>
<br />
<!-- Sans compartimentation -->
<span class="ouverture-citation">
  extérieur
  <span>
    <span class="ouverture-citation">intérieur</span>
  </span>
</span>
<span class="fermeture-citation">fermer</span>

body {
  quotes: "[" "]" "‹" "›";
}
.ouverture-citation::before {
  content: open-quote;
}

.fermeture-citation::after {
  content: close-quote;
}

.style-conteneur {
  contain: style;
}

En raison de la compartimentation, le premier guillemet de fermeture ignore le span interne et utilise à la place le guillemet de fermeture du span externe :

Spécifications

Compatibilité des navigateurs

Voir aussi

• Compartimentation CSS
• Requêtes de conteneur CSS
• La propriété content-visibility
• La propriété position