Widely availableSupported across all major browsers. Safe to use in production.
Layout Widely available

Style containment

The contain: style CSS declaration permits the browser to avoid slower layout calculations by preventing modification to counter (counter-increment and counter-set) and quotation styles (content property quote values) beyond the element's descendants.

Layout

Overview

The contain: style CSS declaration permits the browser to avoid slower layout calculations by preventing modification to counter (counter-increment and counter-set) and quotation styles (content property quote values) beyond the element's descendants.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.properties.contain.style
52
79
103
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)
Notes 1 item(s)
Implementation note
  • Before Chrome 115, style containment did not affect quotes, see bug 40592922.
Notes 1 item(s)
Implementation note
  • Before Edge 115, style containment did not affect quotes, see bug 40592922.
Notes 1 item(s)
Implementation note
  • Style containment does not affect quotes, see bug 232083.
Notes 1 item(s)
Implementation note
  • Before Chrome Android 115, style containment did not affect quotes, see bug 40592922.
Notes 1 item(s)
Implementation note
  • Style containment does not affect quotes, see bug 232083.

Syntax

CSS 
.component {
  contain: style;
}
.isolated-counter {
  contain: style;
  counter-reset: items;
}

Live demo

contain: style

CSS Contain: style demo.

PreviewFullscreen

counter-separated

CSS counter-separated demo.

PreviewFullscreen

Normal comparison

CSS Normal(comparisonuse) demo.

PreviewFullscreen

Use cases

  • Using Style containment

    The contain: style CSS declaration permits the browser to avoid slower layout calculations by preventing modification to counter (counter-increment and counter-set) and quotation styles (content property quote values) beyond the element's descendants.

Cautions

  • May not be supported in older browsers.

Accessibility

  • Make sure visual changes are conveyed appropriately to assistive technology.

Related links

Powered by web-features