CSS containment lets you isolate layout and paint work to self-contained ‘islands’. Here’s what each contain value does and how to use it safely.

CSSWizardry's blog is a resource for frontend developers and web designers seeking to improve their CSS skills and build more maintainable and scalable CSS codebases. Through tutorials, best practices, and case studies, CSSWizardry offers insights into CSS architecture, naming conventions, and modular design principles. Readers can learn about scalable CSS methodologies, responsive web design techniques, and performance optimization strategies to create efficient and maintainable stylesheets. Additionally, CSSWizardry provides updates on the latest CSS specifications, browser support, and front-end tooling to help developers stay up-to-date with the rapidly evolving landscape of web development.

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.

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

content-visibility and contain-intrinsic-size

Caveats, Gotchas, and Things to Watch for

<p>I had no clue about containment. Seems to be quite a step-up for handling performances, and it could solve some of my struggles 🤔 Thanks for sharing, I learned a lot!</p>
