What is CSS containment and how does it improve performance

Short answer

CSS containment tells the browser that an element's subtree is independent of the rest of the page, limiting the scope of layout and style recalculations.

How it works

The contain property accepts values like layout, paint, style, and size. You can also use content or strict as shorthand combinations.

Example

.widget {
  contain: layout paint;
}

Why it matters

When a widget changes, the browser can skip recalculating styles and layout for the rest of the page. This is especially useful for dashboards with many independent components.

Tips

• Use contain: strict with explicit width and height.
• Combine with content-visibility: auto for off-screen sections.
• Test carefully; containment can clip unexpectedly if not sized correctly.