CSS Contain : Boost Your Web Performance

What is CSS Containment ?

CSS Containment allows developers to isolate a targeted subtree of the page from the rest of the page. By adding contain‘s rule in the element, browser engines can identify targeted subtree and use the information to implement optimization.

For example:

.container {
  contain: layout;
}

.container {
  /*to add more than 1 value, use space in between */
  contain: strict style;
}

contain: layout:
The changes in the targeted element are totally isolated from the rest of the page. For example: when a CSS change is triggered inside .container, the browser will only re-render the targeted .container but the rest of the page will not be affected.

contain: paint:
The targeted element will not render/paint anything outside its boundaries.

contain: size:
The targeted element can be sized without the dependency on the descendants’ sizes.

contain: style:
The effects of counters and quotes cannot be escaped from the targeted element.
(**Note: contain: style is considered as “at-risk” in the specifications and may not be supported everywhere else)

contain: content:
This is equal to contain: layout paint style

contain: strict:
This is equal to contain: size layout paint style

contain: none:
No containment will be apply

Browser compatibility

Desktop	Mobile
Chrome 52 Edge 79 Safari 15.4 Firefox 69* Opera 40	Chrome Android 52 WebView Android 52 iOS Safari 15.4 Firefox Android 79* Opera Android 41 Samsung Internet 6.0

* Firefox does not support style value.
Source: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Containment#browser_compatibility