CSS Containment Modules

CSS Containment Module

The CSS containment module defines a new indication, using the contain property, that an element’s subtree is independent of the rest of the page. This will enable browsers to optimize the performance of rendering/painting.

Let’s take an example of a third-party component that we use in our web page. When something changes in the component, it can make a chain reaction that will end in a whole web page reflow or repaint. Using the new containment module, we can indicate that the component is independent and therefore changes in that the component won’t affect the whole web page and vice versa.

Another interesting use case is the HTML5 custom elements API. CSS containment can be very helpful combined with custom elements when you want to indicate containment of the element you are creating.

The Contain Property

In order to force element containment, you will use the new contain property. Currently, the contain property can get the following values:

none | strict | content | [ size || layout || style || paint ]

The none value is the default value. Each value sets a different containment model. For example, using the layout value indicates that nothing outside the element can affect the layout of the element. You can take a look at a benchmark that shows the performance gain when using the property here.

Since we are talking about a CSS property it is very easy to use it:

.widget-name {
   contain: layout;
}

In the example, widget-name is a class that a third-party component is using and we set the contain property on it.