1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
|
---
title: contain
slug: Web/CSS/contain
tags:
- CSS
- Experimental
- Propriété
- Reference
translation_of: Web/CSS/contain
---
<div>{{CSSRef}}{{SeeCompatTable}}</div>
<p>La propriété CSS <strong><code>contain</code></strong> 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, les <em>peintures</em> ou toute combinaison de ces éléments pour une zone donnée du DOM plutôt que pour la page complète.</p>
<pre class="brush: css no-line-numbers">/* 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;
</pre>
<p>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.</p>
<div class="blockIndicator note">
<p><strong>Note :</strong> Lorsqu'elle est appliquée avec une valeur <code>paint</code>, <code>strict</code> ou <code>content</code>, cette propriété crée :</p>
<ul>
<li>un nouveau <a href="/fr/docs/Web/CSS/A_Propos_Du_Bloc_Conteneur">bloc englobant</a> (le bloc servant de référence pour les éléments fils dont la position sera absolue ou <code>fixed</code>)</li>
<li>un nouveau <a href="/fr/docs/Web/CSS/Comprendre_z-index/Empilement_de_couches">contexte d'empilement</a></li>
<li>un nouveau <a href="/fr/docs/Web/CSS/Block_formatting_context">contexte de formatage de bloc</a>.</li>
</ul>
</div>
<h2 id="Syntaxe">Syntaxe</h2>
<h3 id="Valeurs">Valeurs</h3>
<dl>
<dt><code>none</code></dt>
<dd>L'élément est affiché normalement, aucun confinement n'est appliqué.</dd>
<dt><code>strict</code></dt>
<dd>Toutes les règles possibles de confinement à l'exception de <code>style</code> sont appliquées. Cela correspond à <code>contain: size layout paint</code>.</dd>
<dt><code>content</code></dt>
<dd>Toutes les règles de confinement, à l'exception de celles pour <code>size</code> et <code>style</code>, sont appliquées à l'élément. Cela est équivalent à <code>contain: layout paint</code>.</dd>
<dt><code>size</code></dt>
<dd>Cette valeur indique que l'élément peut être dimensionné sans avoir à examiner les éléments descendants pour les modifications de la taille.</dd>
<dt><code>layout</code></dt>
<dd>Cette valeur indique qu'aucun élément en dehors de l'élément, ne peut impacter sa disposition interne et réciproquement.</dd>
<dt><code>style</code></dt>
<dd>Cette valeur indique que les propriétés ayant un effet sur un un élément et ses descendants voire plus sont bien limitées à l'élément englobant.</dd>
<dt><code>paint</code></dt>
<dd>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.</dd>
</dl>
<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
{{csssyntax}}
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spécification</th>
<th scope="col">État</th>
<th scope="col">Commentaires</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS Containment')}}</td>
<td>{{Spec2('CSS Containment')}}</td>
<td>Définition initiale.</td>
</tr>
</tbody>
</table>
<p>{{cssinfo}}</p>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
<p>{{Compat("css.properties.contain")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li>La propriété CSS {{cssxref("position")}}</li>
</ul>
|
