HTML & CSS Interview Question #130
What is CSS containment?
Advanced CSS, Accessibility, Performance, Debugging & Senior Scenarios Senior Advanced
Quick Interview Answer
CSS containment lets an author tell the browser that parts of an element's layout, paint, size, style, or other behavior are sufficiently isolated from the rest of the page. This can allow the browser to limit some rendering work.
Detailed Explanation
CSS containment lets an author tell the browser that parts of an element's layout, paint, size, style, or other behavior are sufficiently isolated from the rest of the page. This can allow the browser to limit some rendering work.
The contain property should be used only when its behavioral constraints are correct for the component. Incorrect containment can change sizing or rendering in unexpected ways, so it is a targeted performance and architecture tool rather than a universal optimization.
Code Example
.widget {
contain: layout paint;
}
/* Use containment only when the component can
safely be isolated in those dimensions. */