4 min read
•Question 31 of 49hardWhat is CSS Containment?
Understanding the contain property for performance.
What You'll Learn
- Containment values
- Performance benefits
- When to use
Contain Values
| Value | Contains |
|---|---|
| layout | Layout calculations |
| paint | Visual rendering |
| size | Size calculations |
| style | Style scope |
| content | layout + paint |
| strict | All containment |
Examples
styles.cssCSS
/* Contain layout and paint */
.widget {
contain: content;
}
/* Full containment (needs explicit size) */
.card {
contain: strict;
width: 300px;
height: 200px;
}
/* Just layout */
.sidebar {
contain: layout;
}Benefits
styles.cssCSS
/* Browser can optimize rendering */
.list-item {
contain: layout;
/* Changes here don't affect siblings */
}