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.
Quick example
.isolated-widget {
/* Prevents changes inside from affecting the rest of the page layout */
contain: layout paint;
}Quick facts
Initial value
noneInherited
No
Applies to
all elements
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+