The CSS contain property indicates that the element’s subtree is independent of the rest of the page. This enables heavy optimizations by user agents when used well.


With the new CSS Containment Property, Developers can inform the browser about scope of an element's styles, layout and paint, depending on which the browser can optimize its Render Pipeline.

The CSS contain property has landed in Chrome 52 and in Opera 40 and is coming soon to Firefox.

Un-optimized Example

There are three divs: .parent-div, .child-div & .dummy-div. I'll be changing the font-size of the .child-div

Animate Me

How to measure improvement

  1. Open Chrome Developer Tools.
  2. Go to Timeline tab.
  3. Hit Record ● (or ⌘ + E / Ctrl + E)
  4. Click Animate Me Button
  5. Stop Recording and zoom into frame and individual process and see time taken.

Optimized Example

Animate Me

contain: layout

contain: paint

contain: size

contain: style

contain: strict

contain: content

If you find any mistake in the above explanation or demo, feel free to raise an issue or fork & suggest changes