Introduction to CSS Containment

Tram Ho

What is CSS-Contain

The main goal of CSS Contaiment is to improve performance when rendering on web pages, allowing one element to be separated from the rest of the page. Let’s take a look at this attribute to see why it improves the performance of complex websites. Imagine you have a bunch of HTML that makes a bulky DOM, but you know some parts of the HTML are completely independent of the rest of the page and the content of those sections is replaced. change from time to time.

Browser tools often try to avoid doing more work than necessary and use some guesswork to avoid taking longer than required to load. However, there are many complex cases in which the browser really needs to recalculate the entire site. To improve this situation, we must be able to use the contain attribute to identify the subsections of the site and separate it from the rest of the page. Then, when there are some changes in some of those sub-branches, the site will only work in that branch and the rest will remain.

Properties of CSS Containment

CSS Containment defines 4 values ​​of the contain attribute

  • layout : The internal layout of an element is completely separate from the rest of the page, it is not affected by anything outside and its content cannot have any effect on the parent element.
  • paint : The child elements of the element are not displayed outside, nothing can overflow this element (or if it is, it is also not visible).
  • size : The size of an element can be calculated without checking its children, the size of the element is independent of its content.
  • style : The effects of counters and quotes cannot escape this element, so they are isolated from the rest of the page. The effects of counters and quotes cannot escape this element, so they are independent of the rest of the page

You can combine different types of containment as you like, but you can use these two shorthand values ​​for the other four types:

  • content : layout paint style.
  • strict : layout paint size style.

Example of CSS Containment

Imagine a page full of these elements, in the case below 10,000 for example

If you do not use css-contain, then the site will take a lot of time for the layout because it will have to go through the entire DOM tree (in this case up to … 10,000 elements)

Example of CSS Containment in DOM

In this example, the DIV item has a fixed size and the content we change in the internal DIV will never overflow. So we can apply contain : the browser doesn’t need to access the remaining nodes when something changes inside the item, it can stop checking everything in that element.

Note that if the content spills out, it will be cut off, if we don’t set a fixed size for that item, it will be displayed as an empty box so that nothing can be seen (actually The borders in this example will have borders, but they will be the only things visible.

Example of CSS Containment

And with the example above when using CSS Containment, the render time decreased from ~ 4ms to ~ 0.04ms, a huge difference.

Browser support

Before closing, one thing that you need to keep in mind is Browser support – the browser that supports it. Containment specification has now become one of the W3C Recommendation – standard web measurement. And one more thing is that users absolutely do not see the difference with and without this attribute. So whether the browser supports it or not, the user will still have a normal experience on the visible side, there is only a difference in performance.


The article is available at: https://blogs.igalia.com/mrego/2019/01/11/an-introduction-to-css-containment/

Share the news now

Source : Viblo