The CSS Containment Property In Chrome 52

The new Containment feature has been added in CSS, which allows the developers to limits the scope of Browser’s styles, layout and paint work. It has been introduced in Chrome 50+ and Opera 40+ with public support from Firefox.

The syntax includes few values

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

We will discuss the values in the syntax later, before that we should learn something about Content property.

The Content Property

While designing new apps or complex websites, it becomes very important to limit the effects, styles, layout and paint. It happens more often that the entire DOM is considered in the scope and it becomes hard to tell whether the changes in one part of it will affect the other part or not. Browsers don’t really get an idea of what to put in the scope or out of the scope.

For example:

Let’s take a sample piece of code:

 Home

 About

 Contact

And after appending a new element to one view, which will trigger styles, layout and paint:

 Home

 About

Check me out

 Contact

In this case, the whole DOM is in scope, the style, layout and paint calculations will consider all the elements irrespective of whether they are changed or not. Bigger DOM makes the computation work more and this will make the app unresponsive for user input.

Modern Browsers are getting really smarter day by day as they are now able to understand the limitations of scope of styles, layout and paint work automatically.

To make it even better a new CSS property called Containment has now come into the picture.

CSS Containment property is a new property with property keyword. It contains following values

• layout

• paint

• size

• style

Let’s look at the detailed explanation of each of the values one by one:

1. layout(contain:layout)

This value turns on layout containment for the element. This value makes the elements totally for layout purposes. Nothing external changes are effective in the internal layout and vice versa. Containment spec

Layouts are normally document scoped and this allows us to scale it according to the size of the DOM. It can be considered as one of the biggest benefit of the containment along with layout:paint.

2. Paint(contain:paint)

Paint value allows the descendants of the elements not to  be displayed outside its bounds. It doesn’t allow the visibility of any element’s descendants if that element is off-screen or not visible. Containment spec

Being an incredibly useful benefits of containment it also has few side effects.

- It acts as a block containing absolutely positioned and fixed position elements.

- It starts behaving as a stack, therefore things like z-index will start affecting the elements and children.

- If the code contains a block level element with paint containment, then it starts treating it as a new layout environment. Layout outside the element     will have no effect on element’s children.

3.Size(contain:size)

   Size is basically used for size containment for the element. The contained elements can be used without getting cross checked by its descendants.    Containment spec

   The value keeps a check that parent’s size should not get affected by element’s children. Inferred and Declared dimensions should be used only. If    the contain:size has no specified dimensions then the elements would be rendered at 0px by 0px.

4. Style(contain:style)

   The value turns on the style containment for the element. It assures that the properties having effects on more than one element should not escape     the containing element. Containment spec

    It always becomes hard to keep a check of the effects on the DOM tree of changing an element’s style. CSS counters can be a perfect example of       this, as changing a counter in a child can affect counter values of the same name used elsewhere in the document.

Strict and Content Containment

Keywords can be combined as contain: layout paint, applying only those behaviors to an element.

• contain: strict means the same as contain: layout style paint size

• contain: content means the same as contain: layout style paint

Strict containment should be used if the size of the element is known already, but it should not be declared without dimensions and if it is declared like that then due to implied size containment it is rendered as 0px by 0px.Content containment offers a lot of scope improvements, but does not give the permission to know or specify the dimensions.