Contain
Learn render isolation with contain.
Render isolation with contain
The contain property stops changes inside an element from leaking outside. The browser treats that element like an isolated box and skips recomputing its siblings.
For example, .card { contain: layout; } means that when the card's inner layout changes, sibling cards are not recomputed. On long lists this is a big win.
Layout containment in depth
Layout containment ensures an element's inner size does not affect its surroundings. If the card resizes, siblings are not recomputed. In a long list each card is evaluated on its own.
contain: strict gives both layout and paint isolation; contain: content adds everything except size. For card lists content is the common pick.
Exercise Add contain to a card list
Complete the CSS below. In .card-list add contain: content. In .card add contain: layout paint and will-change: transform.
Show example solution
/* card list and card */
.card-list {
contain: content;
}
.card {
contain: layout paint;
will-change: transform;
}Test yourself
-
What does contain: layout do?
- Gives the card a background
- Hides the card
- Isolates the inner layout from outside
- Raises the card above the page
Show answer
Isolates the inner layout from outside — Correct. contain: layout stops inner changes of the card from affecting outside elements.
-
Write the contain: layout paint value
.card { /* layout and paint isolation */ contain: ____; }Show answer
.card { /* layout and paint isolation */ contain: layout paint; } -
Match each contain value to its meaning
- layout
- Isolates inner layout
- paint
- Isolates pixels
- strict
- layout paint size together
- content
- like strict but no size
- none
- Isolation off