What Is CSS Containment and How Can I Use It? – CSS Wizardry

CSS containment lets you tell the browser that a DOM subtree is independent of the rest of the page, allowing it to skip unnecessary layout, paint, and style recalculation work. The contain property accepts four values: layout (isolates internal layout), paint (clips painting to the element's box), size (decouples element size from its children), and style (scopes CSS counters). Shorthand values content (layout+paint+style) and strict (size+layout+paint+style) cover common use cases. A real-world OpenTable example shows contain: strict reducing a layout event from touching 4,371 DOM nodes down to 73, making it ~6x faster. The post also covers content-visibility for skipping off-screen rendering, and warns about gotchas like zero-sized boxes, unexpected clipping, stacking context changes, and interactions with container queries.