CSS Containment

From a translator: Paul Lewis’s syllable is very peculiar, so translating the original article in some places may look strange. Comments are welcome.

Containment is a new CSS property that allows developers to limit the scope of styles, layouts, and rendering for the browser.

image

The property supports multiple values, and its syntax is as follows:

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

The property is already in Chrome 52+ and Opera40 + browsers, and it is also publicly supported by Firefox, so give it a chance and tell us what you got.

Contain property


When creating a web application or a complex site, the key to achieving high performance is to reduce the cost of applying styles, reducing the number of layouts and paint. Often, the DOM tree is completely in the scope, which can happen if you try a cunning attempt to create a standalone object (block) in a web application: in this case, changes in one part of the DOM tree can also affect other elements, and the developer will not be able to tell the browser what should be inside the recount area and what should be beyond it.

Consider an example, let's say part of your DOM tree looks something like this:

Home
About
Contact

And then you add a new element to one of the blocks, followed by a change in styles, layout, and rendering:

Home
About
Check me out!
Contact

However, in this case, the entire DOM tree will be in the area that needs to be changed, re-arranged, and redrawn, regardless of whether its elements were involved. And the larger the DOM tree, the more calculations you have to perform, which is why over time your web application may stop responding to the user.

In fact, everything is not so bad, there is good news: modern browsers are getting smarter and trying to limit the scope of styles, layout and rendering automatically, and you do not have to do anything to speed up these processes. But there is better news: a new CSS property has appeared, giving the hands of developers full control over the area - Containment.

CSS Containment is a new property that takes one of 4 keywords as its value:

  • layout
  • paint
  • size
  • style

Each of them will allow you to choose exactly how to limit the operation of the browser during rendering. Let's take a closer look at these values.

Layout (contain: layout)


This value enables the element layout containment mode. In this case, the layout of the document is guaranteed not to interact with the containing block: nothing outside the block can affect its internal layout and vice versa.

Containment constraint may perhaps be considered the most beneficial along with contain: paint.

Typically, the layout affects the entire document, i.e. it is proportional to the size of your DOM tree, so if you want to change the property of leftone of the elements, then the changes can affect each element of the DOM. Therefore, potentially when enabling containment, we can increase productivity by preventing the browser from performing unnecessary work by re-arranging a small number of elements instead of the entire document.

Paint (contain: paint)


This property enables rendering hold mode for an element. It ensures that the descendants of the element will not be displayed outside it, so if the element is out of visibility, then its contents will also be invisible.

Drawing a single area is another extremely useful containment advantage. Rendering controls actually crop the element (i.e., the contents are invisible beyond the borders), which entails several side effects:

  • For absolutely and fixedly positioned elements, this block acts as a containment block. This means that any child blocks are positioned based on an element with the contain: paint property, and not any other elements or the entire document.

  • An overlay context is created for the element. The property z-indexwill affect the element, and all descendants of the element will be superimposed according to the new context.

  • A new formatting context also appears. For example, if you have a block element that has a property set contain: paint, then it will be considered as a new and independent layout environment. This means that the layout from the outside will not affect the contents of the restraining element.

Size (contain: size)


This value includes the element size control mode, which will provide the element with an overlay, without taking into account its descendants.

contain: sizeprohibits child blocks of an element from affecting its specified sizes. Therefore, if you set a property containtwith a value to sizesome element without specifying its dimensions (directly or using flex properties), then this element will be displayed with dimensions 0pxon 0px.

In fact, size control (containment of size) is a reliable way to ensure the independence of the size of an element from its descendants, but in itself it does not give special advantages.

Style (contain: style)


This value enables the element's style control (style containment) mode. In this mode, those properties that can affect several elements and their descendants at once will not be used outside the restraining element.

It’s difficult to predict in advance which effects of a style change will go up the DOM tree. One example of this behavior is something like CSS counters, where changing the counter of a child block can affect the values ​​of counters of the same name used elsewhere in the document. With the given contain: stylestyles, the given element will not be propagated higher in the DOM tree.

Speaking very clearly whatcontain: styleunlike Shadow DOM, it does not provide you with scoped styling (styles with a limited scope). Containment in this case only means limiting the elements of the tree that will be considered when changing styles, but not when they are declared.

Strict (strict) and substantial (content) containment


If necessary, you can combine property values, for example, with contain: layout paint, you can achieve only such types of behavior for an element.

But the property considered in the article also supports 2 additional values:

  • contain: strict same as contain: layout style paint size
  • contain: content same as contain: layout style paint

Using strict containment can come in handy if you know the size of the element in advance (or want to keep it in advance), but keep in mind that if you choose strict containment without specifying sizes due to the estimated size of the content, the element can be displayed with dimensions 0pxon 0px.

Content containment, on the other hand, offers significant improvements to the recount area, but does not require you to know the specific sizes of the elements in advance. By the way, contain: contentyou can use the default.

Use more stringent restrictions as an emergency hatch, only when the effects of use are contain: contentnot enough in your particular case.

Containment is a great way to tell your browser what you intend to isolate within your page. Try using this property in Chrome 52+ and tell us what you think about it.

Also popular now: