Just a few days ago, I wrote about Google’s Web Vitals initiative to focus on key real-world indicators of site speed. If you want to crank up your Core Web Vitals, or if your site most simply “muddles” even long after loading, then know that a new thing has just become the web standard: CSS Containment.
CSS Containment introduces a new property to the style sheet language: contain. Its purpose is to separate the element marked with it and its offspring from the rest of the DOM tree.
The part of the site marked in this way becomes, in a sense, independent of the other elements. The browser, performing various types of changes on tree elements, will not have to recalculate changes in the appearance of the entire site. This will significantly save browser (and, by implication, robot) resources and can reduce rendering time.
When can CSS contain help your site render faster? If various changes are made to it during and after charging:
- font change
- resize the browser window
- attaching or detaching style sheets
- Changes to content, even as mundane as a user filling out a form field
- Through CSS pseudo-classes (such as hovering the mouse over a :hover element)
- scripted manipulation of classes and attributes
This is true of virtually all modern websites, although of course, not for everyone the use of CSS contain will bring any measurable difference.
The CSS contain property can take on a variety of values that can be combined with each other:
contain: size;
Indicates that the element can be scaled without examining the size of the content.
contain: layout;
It creates an independent formatting context, nothing from the outside affects the appearance of the element and vice versa.
contain: paint;
Makes the content not display outside the element; if the content goes beyond the element, it becomes invisible.
contain: strict;
Abbreviation corresponding to contain: size layout paint;
contain: content;
The abbreviation corresponding to contain: layout paint;
If you doubt whether CSS Containment can help you in any way, the answer is as usual – it depends.
On the one hand, CSS contain is fun for optimization geeks, the results of which are sometimes milliseconds of improvement.
On the other hand, sites with lots of widgets and information boxes can gain much more here.
