CSS - contain
The contain
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. This property is useful on pages that contain a lot of widgets that are all independent as it can be used to prevent one widget's CSS rules from changing other things on the page.
Syntax
/* No layout containment. */ contain: none; /* Turn on containment for layout, style, paint, and size. */ contain: strict; /* Turn on containment for layout, style, and paint. */ contain: content; /* Turn on size containment for an element. */ contain: size; /* Turn on layout containment for an element. */ contain: layout; /* Turn on style containment for an element. */ contain: style; /* Turn on paint containment for an element. */ contain: paint;
Values
none
- Indicates the element renders as normal, with no containment applied.
- strict
- Indicates that all containment rules are applied to the element. This is equivalent to
contain: size layout style paint
. - content
- Indicates that all containment rules except size are applied to the element. This is equivalent to
contain: layout style paint
. - size
- Indicates that the element can be sized without the need to examine its dependants for size changes.
- 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 descendents of the element don't display outside its bounds. If an element is off-screen or otherwise not visible, it's descendants are also guaranteed to not be visible.
Formal syntax
none <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> strict <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> content <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> <a title="Brackets" href="css/value_definition_syntax#brackets">[</a> size <a title="Double bar" href="css/value_definition_syntax#double_bar">||</a> layout <a title="Double bar" href="css/value_definition_syntax#double_bar">||</a> style <a title="Double bar" href="css/value_definition_syntax#double_bar">||</a> paint <a title="Brackets" href="css/value_definition_syntax#brackets">]</a>
Description
The contain
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. This property is useful on pages that contain a lot of widgets that are all independent as it can be used to prevent one widget's CSS rules from changing other things on the page.
Initial value | none |
---|---|
Applies to | all elements |
Inherited | false |
Media | all |
Computed value | as specified |
Animation type | discrete |
Canonical order | per grammar |
Browser Compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | 52.0 | No support[1] | ? | 40 | ? |
Feature | Android | Android Webview | Firefox Mobile (Gecko) | Firefox OS | IE Mobile | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|---|---|
Basic support | No support | 52.0 | No support[1] | ? | ? | 40 | ? | 52.0 |
[1] This feature is not implemented yet. See bug 1150081.
Specifications
Specification | Status | Comment |
---|---|---|
CSS Containment Module Level 3 | Editor's Draft | Initial definition |
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/contain