Get the latest tech news

The ‘contain’ CSS property


The contain CSS property indicates that an element and its contents are, as much as possible, independent from the rest of the document tree. Containment enables isolating a subsection of the DOM, providing performance benefits by limiting calculations of layout, style, paint, size, or any combination to a DOM subtree rather than the entire page. Containment can also be used to scope CSS counters and quotes.

There are four types of CSS containment: size, layout, style, and paint, which are set on the container. The main benefit of containment is that the browser does not have to re-render the DOM or page layout as often, leading to small performance benefits during the rendering of static pages and greater performance benefits in more dynamic applications. Using the contain property is useful on pages with groups of elements that are supposed to be independent, as it can prevent element internals from having side effects outside of its bounding-box.

Get the Android app

Or read this on Hacker News

Read more on:

Photo of MDN

MDN

Related news:

News photo

Origin private file system