contain
The contain
CSS property allows an author to indicate that an element and its contents are, as much as possible, independent of the rest of the document tree. This allows the browser to recalculate layout, style, paint, size, or any combination of them for a limited area of the DOM and not the entire page, leading to obvious performance benefits.
This property is useful on pages that contain a lot of widgets that are all independent, as it can be used to prevent each widget's internals from having side effects outside of the widget's bounding-box.
Note: If applied (with value: paint
, strict
or content
), this property creates:
- A new containing block (for the descendants whose
position
property isabsolute
orfixed
). - A new stacking context.
- A new block formatting context.
Syntax
/* Keyword values */
contain: none;
contain: strict;
contain: content;
contain: size;
contain: layout;
contain: style;
contain: paint;
/* Multiple keywords */
contain: size paint;
contain: size layout paint;
/* Global values */
contain: inherit;
contain: initial;
contain: revert;
contain: unset;
The contain
property is specified as either one of the following:
- Using a single
none
,strict
, orcontent
keyword. - Using one or more of the
size
,layout
,style
, andpaint
keywords in any order.
Values
none
-
Indicates the element renders as normal, with no containment applied.
strict
-
Indicates that all containment rules except
style
are applied to the element. This is equivalent tocontain: size layout paint
. content
-
Indicates that all containment rules except
size
andstyle
are applied to the element. This is equivalent tocontain: layout paint
. size
-
Indicates that the element can be sized without the need to examine its descendants' sizes.
layout
-
Indicates that nothing outside the element may affect its internal layout and vice versa.
style
-
Indicates that, for properties that can have effects on more than just an element and its descendants, those effects don't escape the containing element.
paint
-
Indicates that descendants of the element don't display outside its bounds. 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. And if a descendant overflows the containing element's bounds, then that descendant will be clipped to the containing element's border-box.
Formal definition
Initial value | none |
---|---|
Applies to | all elements |
Inherited | no |
Computed value | as specified |
Animation type | discrete |
Formal syntax
Examples
Simple layout
The markup below consists of a number of articles, each with content:
<h1>My blog</h1>
<article>
<h2>Heading of a nice article</h2>
<p>Content here.</p>
</article>
<article>
<h2>Another heading of another article</h2>
<img src="graphic.jpg" alt="photo">
<p>More content here.</p>
</article>
Each <article>
and <img>
is given a border, and the images are floated:
img {
float: left;
border: 3px solid black;
}
article {
border: 1px solid black;
}
You can immediately see an issue — no effort is made to clear the floating beyond the bottom of the article.
Float interference
If we were to insert another image at the bottom of the first article, a large portion of the DOM tree may be re-laid out or repainted, and this would interfere further with the layout of the second article:
<h1>My blog</h1>
<article>
<h2>Heading of a nice article</h2>
<p>Content here.</p>
<img src="i-just-showed-up.jpg" alt="social">
</article>
<article>
<h2>Another heading of another article</h2>
<img src="graphic.jpg" alt="photo">
<p>More content here.</p>
</article>
As you can see, because of the way floats work, the first image ends up inside the area of the second article:
Fixing with contain
If we give each article
the contain
property with a value of content
, when new elements are inserted the browser understands it only needs to recalculate the containing element's subtree, and not anything outside it:
img {
float: left;
border: 3px solid black;
}
article {
border: 1px solid black;
contain: content;
}
This also means that the first image no longer floats down to the second article, and instead stays inside its containing element's bounds:
Specifications
Specification |
---|
CSS Containment Module Level 2 # contain-property |
Browser compatibility
BCD tables only load in the browser
See also
- CSS containment
- CSS
content-visibility
property - CSS
position
property