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.
Usage example
.isolated-widget {
/* Prevents changes inside from affecting the rest of the page layout */
contain: layout paint;
}Initial value
none
Inherited
No
Applies to
allElements
Animation type
notAnimatable
Values
nonestrictcontentsizeinline-sizelayoutstylepaint 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.
Safe to use without fallbacks.
52+
69+
15.4+
79+