contain
Tells the browser that an element and its content are independent of the rest of the page. This allows the browser to optimize rendering because it knows changes inside won't affect anything outside.
It is documented as part of the CSS Containment specification.
Syntax
/* Usage Example */
.isolated-widget {
/* Prevents changes inside from affecting the rest of the page layout */
contain: layout paint;
}
/* Syntax */
contain: none;
contain: strict;
contain: content;
contain: size;
contain: inline-size;
contain: layout;
contain: style;
contain: paint;
/* Global values */
contain: inherit;
contain: initial;
contain: revert;
contain: revert-layer;
contain: unset;contain Browser support
Widely available
Since
2022 95% global usage
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2022.
52+
69+
15.4+
79+
Your first month is free
Managed WordPress hosting for faster sites.
Learn more