CSS new feature contain controls page redrawing and rearrangement issues

Before introducing the new CSS property contain, readers are required to know what page repainting and rearrangement are.

I found that I have described this many times before. You can take a look at the correct approach to improving CSS animation performance [1].

OK, let’s get into the main topic of this article.

contain why?

The contain property allows us to specify a specific DOM element and its child elements so that they can be independent of the entire DOM tree structure. The purpose is to enable the browser to redraw and rearrange only some elements, rather than the entire page every time.

The contain property allows an author to indicate that an element and its contents are, as much as possible, independent of the rest of the document tree. This allows the browser to recalculate layout, style, paint, size, or any combination of them for a pmited area of ​​the DOM and not the entire page. The contain syntax

Take a look at its syntax:

{ 
  /* No layout containment. */ 
  contain: none; 
  /* Turn on containment for layout, style, paint, and size. */ 
  contain: strict; 
  /* Turn on containment for layout, style, and paint. */ 
  contain: content; 
  /* Turn on size containment for an element. */ 
  contain: size; 
  /* Turn on layout containment for an element. */ 
  contain: layout; 
  /* Turn on style containment for an element. */ 
  contain: style; 
  /* Turn on paint containment for an element. */ 
  contain: paint; 
}

Excluding none, there are 6 other possible values. Let's look at them one by one.

contain: size

contain: size: The rendering of an element with contain: size set will not be affected by the content of its child elements.

The value turns on size containment for the element. This ensures that the containing box can be laid out without needing to examine its descendants.

When I first saw this definition, I was also confused. It was difficult to understand what it meant just by looking at the definition. Still need to practice:

Assume we have the following simple structure:

<div class="container"> 
    
</div>

.container { 
    width: 300px; 
    padding: 10px; 
    border: 1px solid red; 
} 
 
p { 
    border: 1px solid #333; 
    margin: 5px; 
    font-size: 14px; 
}

And, with the help of jQuery, a <p>Coco</p> structure is added to the container every time it is clicked:

$('.container').on('click', e => { 
    $('.container').append('<p>Coco</p>') 
})

Then you will get the following result:

As you can see, the height of the container increases as the number of elements increases, which is normal.

At this point, we add a contain: size to the container .container, and the above statement will appear: the rendering of the element with contain: size set will not be affected by the content of its child elements.

.container { 
    width: 300px; 
    padding: 10px; 
    border: 1px solid red; 
+ contain: size 
}

And look what happens:

Normally, the height of the parent element will be stretched due to the increase of child elements. Now, the changes of child elements no longer affect the style layout of the parent element. This is the role of contain: size.

contain: style

Next, let’s talk about contain: style, contain: layout, and contain: paint. Let’s first look at contain: style.

As of the time of writing this article, contain: style has been removed.

CSS Containment Module Level 1[2]: Drop the at-risk “style containment” feature from this specification, move it Level 2.

Well, the official explanation is that it has been temporarily removed because of certain risks. It may be redefined in the second version of the specification, so this attribute will be put aside for the time being.

contain: paint

contain: paint: Elements with contain: paint set layout constraints, which means that the user agent is informed that the child elements of this element will not be displayed outside the bounds of this element. Therefore, if the element is not on the screen or is otherwise set to be invisible, its descendants are also guaranteed to be invisible and not rendered.

This value turns on paint containment for the element. This ensures that the descendants of the containing box don't display outside its bounds, so if an element is off-screen or otherwise not visible, its descendants are also guaranteed to be not visible.

This is a little easier to understand, let's look at the first feature:

The child elements of an element with contain: paint set will not be displayed outside the bounds of this element. The child elements of an element with contain: paint set will not be displayed outside the bounds of this element.

This feature is somewhat similar to overflow: hidden, which explicitly tells the user agent that the content of the child element will not exceed the boundary of the element, so the excess part does not need to be rendered.

A simple example, assuming the element structure is as follows:

<div class="container"> 
    <p>Coco</p> 
</div>

.container { 
    contain: paint; 
    border: 1px solid red; 
} 
 
p{ 
    left: -100px; 
}

Let's take a look at what happens when contain: paint is set and when it is not:

CodePen Demo -- contain: paint Demo[3]

Elements with contain: paint set will not be rendered when they are off-screen

By using contain: paint, the user agent will ignore rendering elements if they are offscreen, allowing other content to be rendered faster.

contain: layout

contain: layout: Elements with contain: layout set layout constraints, which means that the User Agent is informed that style changes inside this element will not cause style changes outside the element, and vice versa.

This value turns on layout containment for the element. This ensures that the containing box is totally opaque for layout purposes; nothing outside can affect its internal layout, and vice versa.

Enabling contain: layout can potentially reduce the number of elements that need to be rendered each frame to just a handful, rather than re-rendering the entire document, saving the browser a lot of unnecessary work and significantly improving performance.

Using contain:layout, developers can specify that any changes to any descendants of that element will not affect the layout of any outer elements, and vice versa.

Therefore, the browser only calculates the position of the inner element if it is modified, while the rest of the DOM remains unchanged. This therefore means that the layout process in the frame rendering pipeline will be faster.

Problems

The description is beautiful, but in the actual Demo test (as of 2021/04/27, Chrome 90.0.4430.85), using contain:layout alone did not verify the above-mentioned beautiful results.

For a specified element with contain: layout set, any changes to any descendants of this element will still affect the layout of any external elements. Clicking the red box will add a <p>Coco<p> element to the container:

The simple code is as follows:

<div class="container"> 
    <p>Coco</p> 
    ... 
</div> 
<div class="g-test"></div>

html, 
body { 
    width: 100%; 
    height: 100%; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    flex-direction: column; 
    gap: 10px; 
} 
 
.container { 
    width: 150px; 
    padding: 10px; 
    contain: layout; 
    border: 1px solid red; 
} 
 
.g-test { 
    width: 150px; 
    height: 150px; 
    border: 1px solid green; 
}

CodePen Demo -- contain: layout Demo[4]

Can i Use -- CSS Contain

As of 2021-04-27, CSS Contain compatibility on Can i Use is already available:

References

CSS Containment Module Level 1[5]

CSS containment[6]

CSS Containment in Chrome 52[7]

References

[1] The right approach to improve CSS animation performance:

https://github.com/chokcoco/iCSS/issues/11

[2]CSS Containment Module Level 1:

https://www.w3.org/TR/css-contain-1/

[3] CodePen Demo -- contain: paint Demo:

https://codepen.io/Chokcoco/pen/KKwmgmN

[4]CodePen Demo -- contain: layout Demo:

https://codepen.io/Chokcoco/pen/rNjRELL

[5]CSS Containment Module Level 1:

https://www.w3.org/TR/css-contain-1/

[6]CSS containment:

https://justmarkup.com/articles/2016-04-05-css-containment/

[7]CSS Containment in Chrome 52:

https://developers.google.com/web/updates/2016/06/css-containment

[8] Github -- iCSS:

https://github.com/chokcoco/iCSS

This is the end of this article about the new CSS feature contain to control the redrawing and rearrangement of the page. For more relevant content about CSS controlling the redrawing and rearrangement of the page, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope that everyone will support 123WORDPRESS.COM in the future!