The CSS contain property – Frontend Masters Boost
August 22, 2024
The purpose of CSS’ contain property (“CSS containment”) is twofold:
- Optimization
- Styling possibilities
When we apply contain to an element we’re isolating it (and it’s descendents) from the rest of the page, and this isolation what opens those possibilities. There are different types of containment which all do different things, and we’ll be getting into each of them.
the contain property is well supported, but less known than perhaps it should be, It brings performance and styling benefits, as Preethi Sam explains in detail here. We also covered containment in the context of performance at Hover in 2022.
