contain-intrinsic-size
A shorthand property to set both the width and height an element should 'pretend' to have when it is under size containment. This is a game-changer for scroll performance.
It is documented as part of the CSS Box Sizing specification.
Syntax
/* Usage Example */
section {
content-visibility: auto;
/* Reserves 100% width and 400px height */
contain-intrinsic-size: 100% 400px;
}
/* Syntax */
contain-intrinsic-size: auto;
contain-intrinsic-size: none;
/* Global values */
contain-intrinsic-size: inherit;
contain-intrinsic-size: initial;
contain-intrinsic-size: revert;
contain-intrinsic-size: revert-layer;
contain-intrinsic-size: unset;contain-intrinsic-size Browser support
Newly available
Since
2023 94% global usage
Since 2023 this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
83+
107+
17+
83+
Your first month is free
Managed WordPress hosting for faster sites.
Learn more