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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
|
---
title: contain
slug: Web/CSS/contain
translation_of: Web/CSS/contain
---
<div>{{CSSRef}}{{SeeCompatTable}}</div>
<p>A propriedade <strong><code>contain</code></strong> permite que um autor indique que elemento e seus conteúdos são, na medida do possível, <em>independente</em> do resto da árvore do documento. Isso permite que o navegador recalcule o layout, estilo, pintura, tamanho ou alguma combinação deles para uma área limitada do DOM e não da página inteira. </p>
<pre class="brush: css no-line-numbers">/* Sem contenção de layout. */
contain: none;
/* Ativa a contenção para layout, estilo, pintura, e tamanho. */
contain: strict;
/* Ativa a contenção para layout, estilo, e pintura. */
contain: content;
/* Ativa a contenção para um elemento. */
contain: size;
/* Ativa a contenção de layout para um elemento. */
contain: layout;
/* Ativa a contenção de estilo para um elemento. */
contain: style;
/* Ativa a contenção de pintura para um elemento. */
contain: paint;
</pre>
<p>Esta propriedade é útil em páginas que contêm um monte de widgets que são todos independentes, uma vez que pode ser usado para impedir que as regras CSS de um widget mude outras coisas na página.</p>
<div>{{cssinfo}}</div>
<h2 id="Sintaxe">Sintaxe</h2>
<h3 id="Valores">Valores</h3>
<dl>
<dt><code>none</code></dt>
<dd>Indica que o elemento processa como normal, sem contenção aplicada.</dd>
<dt>strict</dt>
<dd>Indica que todas as regras de contenção são aplicadas ao elemento. Isso equivale a<code>contain: size layout style paint</code>.</dd>
<dt>content</dt>
<dd>Indica que todas as regras de contenção, exceto <em>size</em> são aplicadas ao elemento. Isso equivale a <code>contain: layout style paint</code>.</dd>
<dt>size</dt>
<dd>Indica que o elemento pode ser dimensionado sem a necessidade de examinar seus dependentes para alterações de tamanho.</dd>
<dt>layout</dt>
<dd>Indica que nada fora do elemento pode afetar seu layout interno e vice-versa. </dd>
<dt>style</dt>
<dd>Indica que, para propriedades que podem ter efeitos em mais do que apenas um elemento e seus descendentes, esses efeitos não escape o elemento que contém.</dd>
<dt>paint</dt>
<dd>Indica que os descendentes do elemento não são exibidos fora de seus limites. Se um elemento estiver fora da tela ou de outra forma não visível, seus descendentes também são garantidos para não ser visível.</dd>
</dl>
<h3 id="Sintaxe_Formal">Sintaxe Formal</h3>
{{csssyntax}}
<h2 id="Especificações">Especificações</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificação</th>
<th scope="col">Status</th>
<th scope="col">Comentário</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS Containment')}}</td>
<td>{{Spec2('CSS Containment')}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2>
<div>{{CompatibilityTable}}</div>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatChrome(52.0)}}</td>
<td>{{CompatNo}}<sup>[1]</sup></td>
<td>{{CompatUnknown}}</td>
<td>40</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android Webview</th>
<th>Chrome for Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>Firefox OS</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatChrome(52.0)}}</td>
<td>{{CompatChrome(52.0)}}</td>
<td>{{CompatNo}}<sup>[1]</sup></td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>40</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<p>[1] This feature implemented behind the preference <code>layout.css.contain.enabled</code>, defaulting to <code>false</code>, currently only supporting the values <code>none</code> and <code>paint</code> (see {{bug(1170781)}}). See {{bug(1150081)}} for the overall implementation status.</p>
|
