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
|
---
title: CSS Containment
slug: Web/CSS/CSS_Containment
translation_of: Web/CSS/CSS_Containment
---
<div>{{CSSRef}}</div>
<p>
El objetivo de la espicificación CSS Containment es mejorar el rendimiento de las páginas web permitiendo a los desarrolladores aislar un subárbol del resto de la página. Si el navegador sabe si una parte de la página es independiente, se puede optimizar la renderización y el rendimiento mejora. La especificación define una única propiedad CSS {{cssxref("contain")}}. Este documento relata los objetivos básicos de la especificación.</p>
<h2 id="Ejemplo_básico">Ejemplo básico</h2>
<p>Muchas páginas web contienen un número de secciones que don independientes entre sí. Por ejemplo una lista de encabezados de artículo y un contenido, como en el siguiente marcado.</p>
<pre class="brush: html notranslate"><h1>Mi blog</h1>
<article>
<h2>Encabezado de un bonito artículo</h2>
<p>Contenido del artículo.</p>
</article>
<article>
<h2>Otro encabezado de otro artículo</h2>
<p>Más contenido.</p>
</article></pre>
<p>Cada artículo tiene la propiedad {{cssxref("contain")}} con valor <code>content</code> aplicado en el CSS.</p>
<pre class="brush: css notranslate">article {
contain: content;
}</pre>
<p>Cada artículo es independiente de los demás artículos en la página, y en consecuencia se les ha aplicado <code>contain: content</code> para indicar al navegador que ese es el caso. El navegador puede entonces usar esa información para tomar decisiones sobre cómo renderizar el contenido. Por ejemplo, puede no renderizar artículos que estén fuera del área visible.</p>
<p>Si aplicamos a cada <code><article></code> la propiedad <code>contain</code> con el valor <code>content</code>, cuando se inserten nuevos elementos el navegador entiende que no necesita hacer <em>relayout </em>o <em>repaint </em>de ningun área que esté fuera del subárbol que contenga el elemento, aunque si aplicamos estilos al <code><article></code> (por ejemplo <code>height: auto</code>), el navegador puede necesitar hacerse cargo de ese cambio de tamaño.</p>
<p>Se nos ha dicho por medio de la propiedad <code>contain</code> que cada artículo es independiente de los demás.</p>
<p>El valor <code>content</code> es una clave para referirse al valor <code>layout paint</code>. Dice al navegador que el <em>layout</em> del elemento está totalmente separado del resto de la página, y que todo lo relacionado con el elemento es pintado dentro de sus límites. Nada puede desbordarse visualmente.</p>
<p>Esta información es algo que normalmente es obvio para el desarrollador a la hora de crear la página web. Sin embargo, los navegadores no pueden adivinar las intenciones del desarrollador y no puede asumir que un <code><article></code> tenga que ser enteramente autocontenido. Esta propiedad, por lo tanto, provee de una buena forma de explicar este hecho al navegador, permitiendo que haga optimizaciones para el rendimiento basados en ese conocimiento.</p>
<h2 id="Key_concepts_and_terminology">Key concepts and terminology</h2>
<p>This specification defines only one property, the {{cssxref("contain")}} property. The values for this property indicate the type of containment that you want to apply to that element.</p>
<h3 id="Layout_containment">Layout containment</h3>
<pre class="brush: css notranslate">article {
contain: layout;
}</pre>
<p>Layout is normally scoped to the entire document, which means that if you move one element the entire document needs to be treated as if things could have moved anywhere. By using <code>contain: layout</code> you can tell the browser it only needs to check this element — everything inside the element is scoped to that element and does not affect the rest of the page, and the containing box establishes an independent formatting context.</p>
<p>In addition:</p>
<ul>
<li><code>float</code> layout will be performed independently.</li>
<li>Margins won't collapse across a layout containment boundary</li>
<li>The layout container will be a containing block for <code>absolute</code>/<code>fixed</code> position descendants.</li>
<li>The containing box creates a stacking context, therefore {{cssxref("z-index")}} can be used.</li>
</ul>
<h3 id="Paint_containment">Paint containment</h3>
<pre class="brush: css notranslate">article {
contain: paint;
}</pre>
<p>Paint containment essentially clips the box to the padding edge of the principal box. There can be no visible overflow. The same things are true for <code>paint</code> containment as <code>layout</code> containment (see above).</p>
<p>Another advantage is that if the containing box is offscreen, the browser does not need to paint its contained elements — these must also be offscreen as they are contained completely by that box.</p>
<h3 id="Size_containment">Size containment</h3>
<pre class="brush: css notranslate">article {
contain: size;
}</pre>
<p>Size containment does not offer much in the way of performance optimizations when used on its own. However, it means that the size of the element's children cannot affect the size of the element itself — its size is computed as if it had no children.</p>
<p>If you turn on <code>contain: size</code> you need to also specify the size of the element you have applied this to. It will end up being zero-sized in most cases, if you don't manually give it a size.</p>
<h3 id="Style_containment">Style containment</h3>
<pre class="brush: css notranslate">article {
contain: style;
}</pre>
<p>Despite the name, style containment does not provide scoped styles such as you would get with the <a href="/en-US/docs/Web/Web_Components/Using_shadow_DOM">Shadow DOM</a>. The main use case is to prevent situations where a <a href="/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">CSS Counter</a> could be changed in an element, which could then affect the rest of the tree. </p>
<p>Using <code>contain: style</code> would ensure that the {{cssxref("counter-increment")}} and {{cssxref("counter-set")}} properties created new counters scoped to that subtree only.</p>
<div class="blockIndicator note">
<p><strong>Note</strong>: <code>style</code> containment is "at-risk" in the spec and may not be supported everywhere (it's not currently supported in Firefox).</p>
</div>
<h3 id="Special_values">Special values</h3>
<p>There are two special values of contain:</p>
<ul>
<li><code>content</code></li>
<li><code>strict</code></li>
</ul>
<p>We encountered the first in the example above. Using <code>contain: content</code> turns on <code>layout</code> and <code>paint</code> containment. The specification describes this value as being "reasonably safe to apply widely". It does not apply <code>size</code> containment, so you would not be at risk of a box ending up zero-sized due to a reliance on the size of its children.</p>
<p>To gain as much containment as possible use <code>contain: strict</code>, which behaves the same as <code>contain: size layout paint</code>, or perhaps the following to also add <code>style</code> containment in browsers that support it:</p>
<pre class="brush: css notranslate">contain: strict;
contain: strict style;</pre>
<h2 id="Reference">Reference</h2>
<h3 id="CSS_Properties">CSS Properties</h3>
<ul>
<li>{{cssxref("contain")}}</li>
</ul>
<h2 id="External_resources">External resources</h2>
<ul>
<li><a href="https://blogs.igalia.com/mrego/2019/01/11/an-introduction-to-css-containment/">An Introduction to CSS Containment</a></li>
<li><a href="https://dev.opera.com/articles/css-will-change-property">Everything You Need to Know About the CSS <code>will-change</code> Property</a></li>
</ul>
|
