The promise
The contain property lets you promise the browser that an element's subtree is independent of the rest of the page. With that guarantee, the engine can limit how far style, layout, and paint work must spread.
Containment types
- layout means the inside layout does not affect outside boxes.
- paint means descendants never draw outside the element's box.
- size means the element's size does not depend on its children.
- content is a shorthand for layout and paint.
content visibility
The related content visibility auto value goes further, letting the browser skip rendering of off screen content entirely until it is needed. Paired with a size hint it can hugely cut initial layout cost on long pages.
Cautions
Containment changes how an element interacts with the page. Size containment can collapse an element that relied on child driven height, so test layouts after applying it.
Key idea
CSS containment scopes style, layout, and paint to an isolated subtree, and content visibility skips off screen rendering, reducing work on large pages.