Widely availableUseful for self-contained widgets and performance-sensitive UI, but it should be applied with a clear understanding of the constraints it introduces.
Performance Widely available

contain

contain limits how much of the rendering pipeline an element can affect outside itself. It can improve performance by reducing layout, paint, and style recalculation scope.

PerformanceContainmentLayout

Overview

contain limits how much of the rendering pipeline an element can affect outside itself. It can improve performance by reducing layout, paint, and style recalculation scope.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
contain
52
79
69
15.4
52
15.4
content
52
79
69
15.4
52
15.4
none
52
79
69
15.4
52
15.4
strict
52
79
69
15.4
52
15.4
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
/* Layout, style, and paint */
.widget {
  contain: layout style paint;
}

/* strict: size + layout + style + paint */
.isolated-component {
  contain: strict;
}

/* content: layout + style + paint (excluding size) */
.card {
  contain: content;
}

Live demo

contain: layout

CSS Containment Contain: layout demo.

PreviewFullscreen

contain: content

CSS Containment Contain: content demo.

PreviewFullscreen

contain: paint

CSS Containment Contain: paint demo.

PreviewFullscreen

Use cases

  • Widget isolation

    Constrain independent components so updates inside them trigger less outside work.

  • Heavy panels

    Improve performance of dashboards or large application regions that update frequently.

Cautions

  • Containment can change layout and sizing behavior, so test components carefully after applying it.
  • Do not add contain as a reflexive micro-optimization without evidence that isolation helps.

Accessibility

  • Performance improvements can help maintain smoother interaction and reading stability for complex interfaces.

Related links

Powered by web-features