CSS contain Property
Example
div {
width: 100px;
height: 100px;
background: red;
margin: 10px;
font-size: 20px;
contain: content;
}Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Meaning:
The contain CSS property specifies that an element and its contents are, as much as possible, independent from the rest of the document tree.
Containment enables isolating a subsection of the DOM, providing performance benefits by limiting calculations of layout, style, paint, size, or any combination to a DOM subtree rather than the entire page. Containment can also be used to scope CSS counters and quotes.
| Default value: | none |
| Inherited: | No |
| Animatable: | No |
| Version: | CSS3 |
| JavaScript syntax: | |
Standard Syntax
contain: none|strict|content|size|inline-size|layout|style|paint|initial|inherit|revert|revert-layer|unset;Browser Support
Status
Property Values
The following table describes the values of this property:
| Value | Description |
|---|---|
| none | The element renders as normal, with no containment applied. |
| strict | All containment rules are applied to the element. This is equivalent to contain: size; layout paint style. |
| content | All containment rules except size are applied to the element. This is equivalent to contain: layout; paint style. |
| size | Size containment is applied to the element in both the inline and block directions. The size of the element can be computed in isolation, ignoring the child elements. This value cannot be combined with inline-size. |
| inline-size | Inline size containment is applied to the element. The inline size of the element can be computed in isolation, ignoring the child elements. This value cannot be combined with size. |
| layout | The internal layout of the element is isolated from the rest of the page. This means nothing outside the element affects its internal layout, and vice versa. |
| style | For properties that can affect more than just an element and its descendants, the effects don't escape the containing element. Counters and quotes are scoped to the element and its contents. |
| paint | Descendants of the element don't display outside its bounds. |
| initial | Sets this property to its default value. |
| inherit | If specified, the associated element takes the computed value of its parent element animation-delay property. |
| revert | Reverts the cascaded value of the property from its current value to the value the property |
| revert-layer | Rollback styles to the ones specified in previous cascade layers. |
| unset | Resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not. |
Default CSS Property Values
selectors {
contain: none;
}