The CSS Containment Specification describes a single property, includes, and can help illustrate to the user which parts of the layout are independent and do not need to recalculate if any other part of the layout changes.
Although this property occurs for purposes of performance optimisation, it can also influence the page layout. In this post, therefore, I will describe the various types of containment that you can benefit from, but also the things that you need to look out for if the application includes elements on your web.
The Interface Recalculation Problem
If you want to add elements to your website without the user needing to reload it, where Containment is useful.
When modifying the contents of our package, the browser must take into account that some of the elements may have changed. In general, browsers are pretty good at coping with this, because it is a common thing that must happen. That said, as the developer, you’re going to know if each of the components is different, and a change to one doesn’t affect the others, so it would be good if you could let the user know this through your CSS. It is what you are given by containment, and the CSS containing properties.
How does it help Containment?
Applying the contain property to an element informs the browser that changes are scoped to that element’s subtree, so that the browser can make any possible optimizations — safe in the knowledge that nothing else can change outside of that item. What a particular browser might do is precisely down to the engine. The CSS property literally gives you the chance to let it know — as the developer and expert on this style.
In certain cases, you would be safe to go straight ahead and start using the contain property, but the different values do come with some possible side effects that are worth knowing before adding the property to your site’s elements.
The containing property will set three different containment types:
Note: Level 2 Specification includes a design attribute. It has been dropped from Level 1, so it does not appear in the Recommendation, and Firefox does not enforce it.
Containment on the model offers the greatest benefits. Using the following snippet to put layout confinement on:
The user knows with allowed layout containment that nothing outside the element can influence the internal layout, and nothing within the element can alter anything about the layout of items outside it. It ensures that for this case it will render all possible optimisations.
When the software containment is allowed, a few additional things happen. These are all items that make sure this box and its contents are separate from the rest of the tree.
The box provides an individual meaning for the formatting. This ensures the box content remains in the box — especially floats will be preserved, and margins will not collapse through the box. It is the same behavior we turn on when using display: flow-root as explained in my article “Understanding the CSS structure and the context for block formatting.” If a float might pop out of your box, allowing the float to move around following text, this would be a situation where the entity modified the layout of things outside, making it a weak containment candidate.
The containing box acts as the central block for any descendants of any absolute or fixed position. This means that it will behave as if you used position: relative to the box that you applied contains layout.
The box provides a framework for stacking, too. Thus z-index will function on this part, it will stack its children based on this new context.
Using the following to switch paint containment on
The same side effects as layout containment occur when paint containment is enabled: the containing box becomes an independent formatting context, a containing block for positioned elements, and a stacking context is established.
What paint containment does is inform the viewer that elements within the surrounding block will not be visible outside the box’s boundaries. Essentially, the contents are clipped to the package.
Containment of size is the attribute that most likely causes you an problem if you are not completely conscious of how it works. Use: To add containment of scale
If you use size containment then tell the user you know the size of the box and it does not shift. This means that if you have a box in the block dimension that is auto-sized, it will be treated as though it has no size, so the box collapses as if it has no material.
If you assign the boxes a height, when it contains: size is used, the height will be respected. Scale containment alone does not create a new formatting background and hence does not contain floats and margins as it would do with layout and paint containment. It’s less likely you’d use it alone; rather, you’d more likely use it along with other covering values to be able to get as much protection as possible.
For certain instances, one of two shorthand values may be used to get the most out of the containment. To turn on the layout and paint containment, use contains: content; and turn on all containment possibilities (bearing in mind that objects that do not have a size will then collapse), use includes: strict.
The Specification says: “contain: content is fairly” free “for widespread application; its effects in practice are relatively slight, and most content does not run out of its restrictions. Since it does not apply size containment, however, the item may still react to the size of its contents which can cause layout-invalidation to percolate further up the tree than desired. Usage includes: rigid, where possible, to achieve as much containment as possible.
Therefore, if you do not know the size of the products in advance and accept the fact that it will include floats and margins, usage includes: content. In addition to being happy about the other side effects of containment, if you know the size of objects, using contains: tight. The rest is up to the user, you did your bit explaining how the interface works.
Will I now use Containment?
The specification for CSS Containment is now a W3C Recommendation which is what we often refer to as a web standard. There needed to be two implementations of the feature that we can see in both Firefox and Chrome to get the spec to this stage:
Since this property is clear to the user, linking to every site is entirely safe even if you have loads of visitors in browsers that don’t support it. If the browser does not support containment then the user gets the experience they usually get, the performance is improved for those in supporting browsers.
I would say that this is a fantastic thing to add to any components you build in a component or template library, if you’re working this way, it’s possible that each component is built to be an individual item that doesn’t impact other components on the web. So if you have a page that adds content to the DOM after loading, I’d recommend you try it
As a reputed Software Solutions Developer we have expertise in providing dedicated remote and outsourced technical resources for software services at very nominal cost. Besides experts in full stacks We also build web solutions, mobile apps and work on system integration, performance enhancement, cloud migrations and big data analytics. Don’t hesitate to get in touch with us!
This article is contributed by Ujjainee. She is currently pursuing a Bachelor of Technology in Computer Science . She likes most about Computer Engineering is that it allows her to learn and be creative. Also, She believes in sharing knowledge hence is very fond of writing technical contents for the same. Coding, analyzing and blogging are things which She can keep on doing!!