CSS Containment and Containerization

Advanced

CSS containment lets an author declare that parts of an element’s subtree are independent of the surrounding document for particular kinds of rendering or layout work. This can give the user agent stronger boundaries for invalidation, layout, and painting. This lesson owns the containment model and content-visibility; it does not own container-query authoring.

The important idea is not “make this component faster.” Containment changes what information can cross a boundary. Each containment type has concrete consequences, so authors should choose the smallest boundary that matches the behavior they need.

Strong containment with contain

The contain property requests one or more containment types. In the current Level 1 Recommendation, none disables containment, size prevents the box from depending on descendant content for sizing, layout makes the containment box opaque for layout, and paint prevents descendants from painting outside the containment box. The strict value combines size, layout, and paint; content combines layout and paint without size containment.

contain: ?;

Size containment changes sizing dependencies

Size containment means the containment box can be laid out without examining its descendants. That is powerful because intrinsic sizing normally depends on content. A contained element can therefore behave as though its contents do not contribute to the relevant sizing calculation; authors must provide an appropriate size when the surrounding layout would otherwise depend on the content.

contain: ?;

Layout containment creates a layout boundary

Layout containment makes the containment box opaque for layout purposes: outside layout cannot depend on the internal layout of the contained subtree, and internal layout does not participate in the surrounding layout through ordinary descendant geometry. Layout containment also has interactions with formatting contexts and positioning behavior; treat those consequences as part of the containment boundary rather than as a new layout algorithm.

contain: ?;

Strict and content containment are combinations

The convenient shorthand values combine containment types. In Level 1, contain: strict is equivalent to size + layout + paint, while contain: content is equivalent to layout + paint. Because these combinations alter multiple dependencies at once, they should be used only when their combined behavior is actually appropriate.

contain: ?;

Style containment and the developing Containment levels

The live CSS Containment Level 2 Editor’s Draft is the active developing containment source. It includes style containment, inline-size containment, and content-visibility. CSS Containment Level 3 is currently an empty placeholder: its former extensions were moved into Level 2 and CSS Conditional Rules Level 5. The curriculum therefore treats Level 2 as the active containment draft and does not invent a separate Level 3 owner.

content-visibility is a separate visibility/performance boundary

The current Containment Level 2 draft also defines content-visibility. The hidden value suppresses an element’s contents entirely, while auto allows the user agent to skip layout and painting of content when it is not needed for the current view. This is related to containment but should not be confused with paint clipping or with making content inaccessible: the specification has explicit accessibility implications and restrictions.

content-visibility: ?;

Containment is not the same as clipping, overflow, or container queries

Keep the ownership boundaries precise. Overflow owns scrollable overflow, scroll containers, and overflow clipping. Masking and clipping own visual clipping effects such as clip-path and masks. Container Queries owns query-container authoring, @container conditions, and container-relative units. Containment owns the dependency-isolation model that can underpin some of those features, but it does not absorb their separate concepts.

@container (min-width: 40rem) {? }

Choose containment deliberately

Start from the dependency you want to isolate: sizing, layout, painting, or a combination. Prefer a narrow containment boundary when it answers the performance or architecture problem. If size containment is involved, make the resulting sizing behavior explicit. If paint containment is involved, check whether descendants need to render outside the boundary. If content-visibility is involved, verify the behavior of hidden or skipped content against the specification and the accessibility needs of the page.