CSS Containment: an underrated performance boost 🚀
How contain isolates the DOM to reduce layout, paint and style recalculations, and the limitations to watch for.
I came across an excellent CSS Wizardry article about contain, and it seems many people still underestimate it.
contain lets you isolate part of the DOM and tell the browser: “Everything that happens inside does not affect the rest of the page.”
As a result, the browser can significantly optimize layout, paint and style recalculations.
The author covers the main values:
contain: layout: layout isolationcontain: paint: nothing extends beyond the boundariescontain: size: the element does not affect its parent’s dimensionscontain: content: everything together at once, the most common use case
Especially useful for:
- widgets
- complex components
- virtualized lists
- any isolated UI blocks
💡 Essentially, this is a way to manually tell the browser where an element’s influence ends, so it does not recalculate more than necessary.
But there are caveats:
- you can accidentally break the layout
sizedoes not always behave intuitively- not everything can be safely isolated
The article has plenty of examples and explanations of where this actually pays off.