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.
The property supports multiple values, and its syntax is as follows:
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.
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:
And then you add a new element to one of the blocks, followed by a change in styles, layout, and rendering:
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:
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.
Containment constraint may perhaps be considered the most beneficial along with
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
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:
This value includes the element size control mode, which will provide the element with an overlay, without taking into account its descendants.
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.
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
Speaking very clearly what
If necessary, you can combine property values, for example, with
But the property considered in the article also supports 2 additional values:
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
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,
Use more stringent restrictions as an emergency hatch, only when the effects of use are
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.
Containment is a new CSS property that allows developers to limit the scope of styles, layouts, and rendering for the browser.
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
left
one 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-index
will 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: size
prohibits child blocks of an element from affecting its specified sizes. Therefore, if you set a property containt
with a value to size
some element without specifying its dimensions (directly or using flex properties), then this element will be displayed with dimensions 0px
on 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: style
styles, the given element will not be propagated higher in the DOM tree. Speaking very clearly what
contain: style
unlike 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 ascontain: layout style paint size
contain: content
same ascontain: 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
0px
on 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: content
you can use the default. Use more stringent restrictions as an emergency hatch, only when the effects of use are
contain: content
not 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.