DZone
Web Dev Zone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
  • Refcardz
  • Trend Reports
  • Webinars
  • Zones
  • |
    • Agile
    • AI
    • Big Data
    • Cloud
    • Database
    • DevOps
    • Integration
    • IoT
    • Java
    • Microservices
    • Open Source
    • Performance
    • Security
    • Web Dev
DZone > Web Dev Zone > 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.

Gil Fink user avatar by
Gil Fink
·
Oct. 20, 17 · Web Dev Zone · Tutorial
Like (3)
Save
Tweet
5.34K Views

Join the DZone community and get the full member experience.

Join For Free

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.

CSS

Published at DZone with permission of Gil Fink, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Fintech and AI: Ways Artificial Intelligence Is Used in Finance
  • How Database B-Tree Indexing Works
  • Top 20 Git Commands With Examples
  • What Is ERP Testing? - A Brief Guide

Comments

Web Dev Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • MVB Program
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends:

DZone.com is powered by 

AnswerHub logo