everything about web

A Comprehensive Guide to the World of Web Design & Development:

CSS, HTML, Performance, Web Design, and all Aspects of Front-End Development

Advertisements

CSS Contain : Boost Your Web Performance

What is CSS Containment ?

CSS Containment allows developers to isolate a targeted subtree of the page from the rest of the page. By adding contain‘s rule in the element, browser engines can identify targeted subtree and use the information to implement optimization.

CSS property:contain
Value:layout , paint , size , style , content , strict , none
Initial value:none

For example:

.container {
  contain: layout;
}
.container {
  /*to add more than 1 value, use space in between */
  contain: strict style;
}

contain: layout:
The changes in the targeted element are totally isolated from the rest of the page. For example: when a CSS change is triggered inside .container, the browser will only re-render the targeted .container but the rest of the page will not be affected.

contain: paint:
The targeted element will not render/paint anything outside its boundaries.

contain: size:
The targeted element can be sized without the dependency on the descendants’ sizes.

contain: style:
The effects of counters and quotes cannot be escaped from the targeted element.
(**Note: contain: style is considered as “at-risk” in the specifications and may not be supported everywhere else)

contain: content:
This is equal to contain: layout paint style

contain: strict:
This is equal to contain: size layout paint style

contain: none:
No containment will be apply

Browser compatibility

DesktopMobile
Chrome 52
Edge 79
Safari 15.4
Firefox 69*
Opera 40
Internet Explorer
Chrome Android 52
WebView Android 52
iOS Safari 15.4
Firefox Android 79*
Opera Android 41
Samsung Internet 6.0

* Firefox does not support style value.
Source: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Containment#browser_compatibility

Advertisement

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

If you found this article helpful and would like to show your support, you can buy me a coffee using the link below. Thanks a bunch!

Choose an amount

$5.00
$10.00
$15.00

Or enter a custom amount

$

Thank you for your contribution!

Donate

Topics:

CSS (27) css pseudo (3) debug (2) design (4) fonts (2) html (6) image (8) layout (5) optimization (10) performance (9) responsive (8) Software-development (1)


Advertisements

Recent Post:

Advertisements

Related Posts

Advertisements
Advertisements
%d bloggers like this: