CSS Containment
From the translator: Paul Lewis has a very peculiar syllable, so the translation of the original article in some places may look strange. Comments are welcome.
Containment (deterrence) - 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, as well as it is publicly supported by Firefox, so give it a chance and tell us what you did.
When creating a web application or a complex website, the key task of achieving high performance is reducing the cost of applying styles (styles), reducing the number of layouts (layout) and drawing (paint). Frequently, the DOM tree is completely in the scope of recalculation (scope), which can occur when a sly attempt to create an autonomous object (block) in a web application: in this case, changes in one part of the DOM tree can also affect other elements, the developer will not be able to indicate to the browser what should be inside the conversion area and what is outside it.
Consider an example, let's say a part of your DOM tree looks like this:
And then you add a new element to one of the blocks, followed by a change in styles, layout and drawing:
However, in this case, the DOM tree will be entirely in the area that needs to be changed, rebuilt and redrawn, regardless of whether its elements were involved. And the more the DOM tree, the more calculations you have to perform, and as a result, your web application may stop responding to the user over time.
In fact, everything is not so bad, there is good news: modern browsers are getting smarter and try to limit the scope of styles, layouts and rendering automatically, and you don’t have to do anything to speed up these processes. But there is a better news: a new CSS property has appeared, which gives developers full control over the area - Containment.
CSS Containment is a new property, taking its value from one of 4 keywords:
Each of them will allow you to choose exactly how to restrict the browser during rendering. Let's take a closer look at these values.
Containment of the layout may be considered the most advantageous along with
As a rule, the layout affects the whole document, i.e. it is proportional to the size of your DOM tree, so if you want to change the
This property enables the hold mode for the item. It guarantees that the descendants of the element will not be displayed outside of it, so if the element is out of sight, then its contents will also be invisible.
Drawing a single area is another extremely useful benefit to containment. The rendering control actually cuts the element (i.e., the content is invisible beyond the boundaries), which entails several side effects:
This value includes the mode of controlling the size of the element, which will ensure that this element overlay without taking into account its descendants.
In fact, size management (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 provide any particular advantages.
This value turns on the style control mode (style restraint) of the element. In this mode, those properties that can affect several elements and their descendants at once will not be used outside of the restraining element.
It is difficult to predict in advance what effects of changing styles will go up the DOM-tree. One example of this behavior is something like CSS counters, where a change in the counter of a child block may affect the values of the counter with the same name, used elsewhere in the document. With the specified
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 be great if you know the size of an element beforehand (or you want to keep it in advance), but keep in mind that if you choose strict containment without specifying dimensions due to the intended size of the content, the element can be displayed with dimensions of
Content containment, on the other hand, offers significant improvements to the recalculation area, but does not require you to know the specific dimensions of the elements in advance. By the way,
To use more stringent restrictions as an emergency hatch, only when the effects of using
Containment is a great way to tell the browser that you intend to isolate within your page. Try using this property in Chrome 52+ and tell us what you think about it.
Containment (deterrence) - 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, as well as it is publicly supported by Firefox, so give it a chance and tell us what you did.
Contain property
When creating a web application or a complex website, the key task of achieving high performance is reducing the cost of applying styles (styles), reducing the number of layouts (layout) and drawing (paint). Frequently, the DOM tree is completely in the scope of recalculation (scope), which can occur when a sly attempt to create an autonomous object (block) in a web application: in this case, changes in one part of the DOM tree can also affect other elements, the developer will not be able to indicate to the browser what should be inside the conversion area and what is outside it.
Consider an example, let's say a part of your DOM tree looks like this:
<section class="view"> Home </section> <section class="view"> About </section> <section class="view"> Contact </section> And then you add a new element to one of the blocks, followed by a change in styles, layout and drawing:
<section class="view"> Home </section> <section class="view"> About <div class="newly-added-element">Check me out!</div> </section> <section class="view"> Contact </section> However, in this case, the DOM tree will be entirely in the area that needs to be changed, rebuilt and redrawn, regardless of whether its elements were involved. And the more the DOM tree, the more calculations you have to perform, and as a result, your web application may stop responding to the user over time.
In fact, everything is not so bad, there is good news: modern browsers are getting smarter and try to limit the scope of styles, layouts and rendering automatically, and you don’t have to do anything to speed up these processes. But there is a better news: a new CSS property has appeared, which gives developers full control over the area - Containment.
CSS Containment is a new property, taking its value from one of 4 keywords:
- layout
- paint
- size
- style
Each of them will allow you to choose exactly how to restrict the browser during rendering. Let's take a closer look at these values.
Layout (contain: layout)
This value turns on item 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 arrangement and vice versa.
Containment of the layout may be considered the most advantageous along with
contain: paint.As a rule, the layout affects the whole document, i.e. it is proportional to the size of your DOM tree, so if you want to change the
left property of one of the elements, the changes can touch every element of the DOM. Therefore, potentially with the inclusion of restraint, we can increase productivity by allowing the browser not to do unnecessary work by recomposing a small number of elements instead of the entire document.Paint (contain: paint)
This property enables the hold mode for the item. It guarantees that the descendants of the element will not be displayed outside of it, so if the element is out of sight, then its contents will also be invisible.
Drawing a single area is another extremely useful benefit to containment. The rendering control actually cuts the element (i.e., the content is invisible beyond the boundaries), which entails several side effects:
- For absolutely and fixed positioned elements, this block acts as a retaining 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.
- The element has an overlay context. The
z-indexproperty 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 the
contain: paintproperty set, 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 retaining element.
Size (contain: size)
This value includes the mode of controlling the size of the element, which will ensure that this element overlay without taking into account its descendants.
contain: size prohibits child element blocks from affecting its specified size. Therefore, if you set the containt property with a size value to some element, without specifying its dimensions (directly or using flex-properties), then this element will be displayed with dimensions 0px at 0px .In fact, size management (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 provide any particular advantages.
Style (contain: style)
This value turns on the style control mode (style restraint) of the element. In this mode, those properties that can affect several elements and their descendants at once will not be used outside of the restraining element.
It is difficult to predict in advance what effects of changing styles will go up the DOM-tree. One example of this behavior is something like CSS counters, where a change in the counter of a child block may affect the values of the counter with the same name, used elsewhere in the document. With the specified
contain: style styles of the specified element will not be distributed higher in the DOM tree.Speaking very clearly, what
contain: style does not give you, unlike the Shadow DOM, is scoped styling (styles with a limited scope). Containment in this case implies only a restriction of the tree elements that will be considered when the styles change, but not when they were declared.Strict and content restraint
If necessary, you can combine property values, for example, with
contain: layout paint , you can only achieve these types of behavior for an element.But the property considered in the article also supports 2 additional values:
contain: strictthe same ascontain: layout style paint sizecontain: contentthe same ascontain: layout style paint
Using strict containment can be great if you know the size of an element beforehand (or you want to keep it in advance), but keep in mind that if you choose strict containment without specifying dimensions due to the intended size of the content, the element can be displayed with dimensions of
0px per 0px .Content containment, on the other hand, offers significant improvements to the recalculation area, but does not require you to know the specific dimensions of the elements in advance. By the way,
contain: content can be used by default.To use more stringent restrictions as an emergency hatch, only when the effects of using
contain: content not enough in your particular case.Containment is a great way to tell the browser that you intend to isolate within your page. Try using this property in Chrome 52+ and tell us what you think about it.
Source: https://habr.com/ru/post/309042/
All Articles