CSS Containment Modules
CSS Containment Modules
While they don't enjoy widespread browser support (yet), CSS's containment modules allow for optimizing your components' performance.
Join the DZone community and get the full member experience.
Join For FreeLearn how error monitoring with Sentry closes the gap between the product team and your customers. With Sentry, you can focus on what you do best: building and scaling software that makes your users’ lives better.
One of the new hidden gems in the new CSS modules, which is supposed to drop in new browser versions in the future, is CSS containment. In this short post, I’ll explain what is the new contain property and why you will want to use it.
CSS Containment Module
The CSS containment module defines a new indication, using the contain property, that an element’s subtree is independent of the rest of the page. This will enable browsers to optimize the performance of rendering/painting.
Let’s take an example of a third-party component that we use in our web page. When something changes in the component, it can make a chain reaction that will end in a whole web page reflow or repaint. Using the new containment module, we can indicate that the component is independent and therefore changes in that the component won’t affect the whole web page and vice versa.
Another interesting use case is the HTML5 custom elements API. CSS containment can be very helpful combined with custom elements when you want to indicate containment of the element you are creating.
The Contain Property
In order to force element containment, you will use the new contain property. Currently, the contain property can get the following values:
none | strict | content | [ size || layout || style || paint ]The none value is the default value. Each value sets a different containment model. For example, using the layout value indicates that nothing outside the element can affect the layout of the element. You can take a look at a benchmark that shows the performance gain when using the property here.
Since we are talking about a CSS property it is very easy to use it:
.widget-name {
contain: layout;
}In the example, widget-name is a class that a third-party component is using and we set the contain property on it.
Summary
CSS containment isn’t supported by the major browsers except Chrome and Opera (at the time I’m writing this post). When it is widely adopted in browsers, it will enable us to optimize different web page components' performance.
What’s the best way to boost the efficiency of your product team and ship with confidence? Check out this ebook to learn how Sentry's real-time error monitoring helps developers stay in their workflow to fix bugs before the user even knows there’s a problem.
Like This Article? Read More From DZone
Published at DZone with permission of Gil Fink , DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.
{{ parent.title || parent.header.title}}
{{ parent.tldr }}
{{ parent.linkDescription }}
{{ parent.urlSource.name }}