How CSS Contain Property is Used to Optimize Browsers?

In the past several years, different CSSCSSCascading Style Sheets is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript. properties and elements have been introduced to optimize and improve browser performance. Following that trend, a new CSS property, CSS contain has been recently introduced. It is the latest specification to be approved by the standards forum to be used across web browsers. It has been designed to inform the browser what parts of a web page need to change and what parts need not change during optimization.

Tackling Layout Recalculation

CSS contain is effective when you wish to add new elements to your page without reloading it. While doing so, you might encounter layout issues that might occur between the elements of your webpage. Using CSSCSSCascading Style Sheets is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.contain property, you are communicating with the browser the independence of different components, and the changes being made are contained within this specific component.

How CSS Contain Helps Browsers?

The main purpose of CSS containment is to save web browsers from doing extra work and getting only the necessary changes made. For example, inspect an element of an HTMLHTMLHypertext Markup Language is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets and scripting languages such as JavaScript. document using DevTools. You can then identify an item that needs to be changed and then subject it to some internal changes. This guarantees only this item and its sub-items undergo the proposed change.

It comes in 3 different variations, and it is important to understand each of their impacts before using them with this CSS property.

3 Different Types of Containment – Layout, Paint & Size

 

• Layout

The layout is the reason for bringing in an independent formatting context. As a result, the content within the box is stopped from overflowing out of the box. This helps in getting things organized and structured. 

It creates a block that acts as if you have already formatted it with absolute or relative positioning. The descendant blocks will now be positioned such that all elements are positioned relative after this box, assigned as contain: layout. 

Finally, there is a stacking context that usually gets created. This means that the box with the contain: layout gets a z-index. The next blocks will get stacked based on this new context. For example, here the block which was exceeding its bounds earlier is now contained and accommodated within its block using contain: layout.

When using contain: layout, upon clicking on the “Toggle button” option, the objective is to change the height of the line item according to the height of the box. This is to make sure that the box is contained within the line item.

• Paint

Paint is the feature that informs the browser that no elements overflow the block within which it is contained. It offers the same primary benefits as that of the layout. There is the independent formatting context, blocks for positioning elements, and then stacking order for blocks. It tells the browser that the content and the formatting applied to a block is confined to it. 

If an element floats and exceeds the dimensions of the box, by using the contain: paint, you can make it look as though it fits the box. For example, even if the height of the block exceeds the height of the box, using contain: paint, you can make sure that the overflowing block to be clipped to the block. Now the block appears as though it does not overflow the box.

• Size

Size is the one that requires to be dealt with attention. By using this option, you are telling the browser you know the size of the box, and it is going to be fixed. Any block that follows this block that is auto-sized is now considered as one with no size and will collapse as if it had no content.

For example, if only the height of the first box is specified, all boxes following this box with the contain: size will be treated like boxes with no height and be automatically collapsed. If the height of the box is mentioned, then their height will be retained.

It is not a standalone feature that has floats and margins. For this reason, you can use it with layout and paint. There are 2 other variations that can be used of CSSCSSCascading Style Sheets is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript. contain – contain: content and contain: strict.

contain: content  – This option involves using layout and paint together but can result in size and layout problems. This can be used when you are unsure about the size of the box in advance and knowing that floats and margins are contained.

contain: strict – This option is a combination of all three variations of containment – layout, paint, and size. This is used only when you are sure about the size of the box in advance and understand the side effects of containment.

Can CSS Contain Be Used Now?

As per W3C Recommendation, CSS contain is available for use in web pages across browsers. It can be seen that Firefox and Chrome are now supporting its installation and usage. Even in browsers that do not support it, since it is a performance optimization tool, there is no risk in using it. If your site supports this CSS property, your users will benefit from the improved experience.

If you have further questions about website optimization, our expert developers are here to help. Line up your queries at media@techaffinity.com or schedule a meeting with our team.