Intermediate LevelCSS & Modern Layouts
What does the CSS contain property do for rendering performance?
❓ Interview Prompt: Explain CSS containment types (layout, paint, size, style) and how they limit browser recalculations.
The contain property limits the scope of browser layout/paint recalculations, preventing changes in one element from triggering expensive re-renders across the entire page:
Containment Types:
•
contain: layout — element's layout is independent; internal changes don't affect siblings.•
contain: paint — element's painting doesn't bleed outside its bounds.•
contain: size — element's size is independent of its children.•
contain: style — counters and other style effects don't escape.•
contain: strict — all of the above combined.•
contain: content — layout + paint (most commonly useful).Code Implementation Example
css
/* Isolate widget rendering performance */
.dashboard-widget {
contain: content; /* layout + paint containment */
}
/* Strict containment for independent cards */
.card {
contain: layout paint;
}
/* content-visibility implicitly sets contain */
.offscreen-section {
content-visibility: auto;
}💡Layout and paint containment for isolated component rendering.
🎯 Interview Key Takeaway
contain: content prevents layout changes inside an element from triggering expensive page-wide recalculations.
#Containment#Performance#Rendering#Intermediate
Back to all CSS & Modern Layouts Questions→