The CSS contain property
The CSS contain property êŽë š
Thepurposeof CSSâcontainproperty (âCSS containmentâ) is twofold:
- Optimization
- Styling possibilities
When we applycontainto 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.
.element {
contain: size;
contain: paint;
contain: layout;
/* they can also be combined, e.g. */
contain: size layout;
}
First,optimization. When somethingchangesan element after the page has rendered, the browser rethinks the entire page in case that element affects the rest of the page (visible or not). But with a contained element, we let the browser know that the change we made is restricted toonlythe contained element and its children, and the browser neednât bother with the rest of the page because there wonât be any impact on that.
Second,relative styling. Meaning positioning, visibility, stacking, sizing, etc, and by ârelativeâ I mean styling an element in comparison to that of the viewport or the parent element ârelative positioningandrelative sizingare two good examples of this that weâve had for a long time.
Since the introduction of CSS Containment, a lot more relative styling can be done in the scope the contained element and its descendants. Youâll see examples as we proceed.
Note
In this article, CSS Containment refers to the CSScontainproperty. Its namesake W3C Standard, however, covers a few more specifications, like container units.
Size Containment
Although âsize containmentâ sounds highly useful, in practice you might not use this much.
When an elementâs size iscontained,the browser does not allow anything that happens inside the contained element (to the content or the descendant elements) to affect its size. In other words, you have a way to achieve truly fixed sizing.
But fixed sizing is not in trend. These days we have a lot of options for for dynamic sizing. For instance, CSS units relative to the root font size (rem,rex, etc.), units responsive to the viewport size (vw,dvh, etc.), units relative to the current font size (em,lh, etc.), you name it. Which means we usually do a pretty good job of sizing the different elements on a page for different screen sizes and content.
What if, for example, a user is interacting with a page and caused new dynamic information to appear on the page? This new information takes up space. Now have options and can make a choice.
- Is it better to allow the element, and potentially the entire page, to reflow and change?
- Or is it better to contain the element so that the changespreventthe reflow?
If it feels like the latter, size containment can be the solution (or part of the solution) for you.
Note
Be sure to set the desired dimensions, width and height (or logical properties), or aspect ratios when using size containment, because the browser initially renders a contained element as if itâs empty, and without the right dimensions set, elements might end up having a zero dimension.
.box {
width: 100px;
min-height: 100px;
img {
width: 200%;
...
}
&:nth-of-type(2) { /* the second box */
contain: size;
...
}
...
}
Setting an elementâs dimensions yourself may feel like size containment already, and typically that is all you need, which is why I said you may not need this much. But if youâre entirely sure you donât want this element to change size or affect any other elements, protecting against unforseen changes, size containment may be a good idea.
Paint Containment
If youâre familiar with theoverflowproperty, thatâs a good place to start understanding paint containment. However, they are not quite the same.
Outside a paint-contained elementâs box,the browser neither displays any content, nor it makes the concealed content scrollable to by any means at all. In this aspect, paint containmentâs behavior is similar tooverflow:clip rather than overflow:hidden (which allows scrolling to the concealed content or elements through methods like the JavaScript scroll event).
So if you want totrim the overflowed contentof an element while also ensuring that content is not at all scrollable to, a paint-containment can be used. A browser might alsosave computational effort by not rendering an off screen paint-contained element.
I also have another good reason for why you might need paint containment.
As I mentioned at the beginning of the article, containment is the isolation of an element in all factors. Thatâs worth repeating here. Paint containment is not just about clipping whatâs fallen out of a container box, but alsoisolating that box itself from the rest of the rendered page by creating new stacking and formatting contextsfor that element. Paint containment also generates a separate absolute and fixed positioning container box (Iâll explain this in Layout Containment).
Below, there are two examples: the first one is a sample of paint containment (contain:paint), and the second is a comparison between the behavior of overflow:clip and contain:paint. Youâll notice the paint containmentâs isolating effect clearly in the second example, where the contained element is unaffected by the CSS blending applied to its sibling element.
.box {
width: 100px;
img {
width: 200%;
...
}
&:nth-of-type(2) { /* second box */
contain: paint;
...
}
...
}
section {
div {
width: 100px;
aspect-ratio: 1/1;
}
.box {
background: red;
}
&:nth-of-type(2) .box {
overflow: clip;
}
&:nth-of-type(3) .box {
contain: paint;
}
.box-sibling {
background: blue;
mix-blend-mode: hue;
...
}
}
Layout Containment
Layout is essentially the flow of elements and content. Over the years, more than sizing, more than painting, the most work we have delegated to the browsers is in the scope of layout. There are CSS properties, likefloat,vertical-align, and such, for us to communicate to the browsers where we prefer an element to be a little re-positioned to from its natural place on the page.
And then there are full scale layouts, like Grid Layout, Page Layout (used for the print medium), Column Layout, etc., to tell the browser to place everything on the page in a particular fashion we fancy.
The modern browsers do all that with incredible speed and efficiency, however, we can still make it easier on them by adding layout containments to elements, so thatany layout changes in the contained elements and its descendants can be handled independently, andif they are off screen, laying out their contents can be put off until needed. If you are consideringoptimizing your pages, layout containment is a good candidate to consider.
And thatâs not all. More often than not, position of all the boxes in a page are based on each other â One box moves, the other follows suit. Which is not we always want to happen. With the help of layout containment,you can have multiple layouts in a page with the assurance that their contents are not going to flow into each other, by forming layout islands that are unaffected by whateverâs happening in the nearby islands.
Just as in the case of paint containment, layout containment also creates a separate formatting, and stacking, contexts for the contained elements. They also generate their own absolute and fixed positioning containing boxes, meaning they become the reference box to position any absolute â or fixed â positioned child elements.
.box {
width: 100px;
aspect-ratio: 1/1;
.fixed-element {
background: lime;
position: fixed;
left: 0px;
bottom: 0px;
...
}
&:nth-of-type(2) { /* Box B */
contain: layout;
...
}
...
}
Inline-Size and Style Containments
Although not yet a W3C recommendation, bothcontain: inline-sizeandcontain: styleare valid values, that are well supported in browsers, and are included in the W3C Working Drafts of CSS Containment Module Level 2 and 3. I didnât mention them at the top only because they havenât yet reached that recommendation status.
The functions of a Style Containment is also a bit tentative at the moment, and might grow before it hits the W3C recommendation status.
Iâll briefly explain them both, however.Inline Size Containmentis same as the Size Containment, butfor inline sizes only (the horizontal/width direction in any left-to-right or right-to-left horizontal writing mode). This gives you a size restraint for elements along their inline axes. This is particularly common for container queries. I havenât mentioned container queries here, but these things are conceptually linked. When you set a container-type: inline-size as is required for typical container queries, you are effectively also setting contain: inline-size implicitly.
When an element hasStyle Containment, the tallying of CSS Counters and thequotevalues of thecontentproperty inside the contained element are unaffected by any counter or quote values mentioned outside. Essentially,the counters and quotes are scoped within a style-contained element. Pretty niche!
ThestrictandcontentValues
As I mentioned at the top, you can combine the differentcontainvalues (by space-separating them). There are also keywords for pre-combined values.
Whencontainhas the valuestrict,all the containment types are appliedto an element. Probably not something youâd use unless you are working with an element or module on your page thatâs prone to a lot of changes during the pageâs existence on screen, like the display of live sports data or the like.
Then thereâs the contentvalue, which is acombination of paint, layout, andstyle.You are more likely to want to use this if your goal is to simply ensure nothing spills outside an elementâs boundary at all cost, or to keep the browser from rendering or laying out the contained elements and its children when they are off screen or hidden, for the sake of optimization.
Those are my recommendations for the CSScontainproperty. Itâs a property thatâs just as worthwhile to learn about for the sake of programming techniques, as it is for the sake of optimizing web pages.
References
