contain-intrinsic-size
The contain-intrinsic-size
CSS shorthand property sets the size of an element that a browser will use for layout when the element is subject to size containment.
Constituent properties
This property is a shorthand for the following CSS properties:
Syntax
css
/* Keyword values */
contain-intrinsic-width: none;
/* <length> values */
contain-intrinsic-size: 1000px;
contain-intrinsic-size: 10rem;
/* width | height */
contain-intrinsic-size: 1000px 1.5em;
/* auto <length> */
contain-intrinsic-size: auto 300px;
/* auto width | auto height */
contain-intrinsic-size: auto 300px auto 4rem;
/* Global values */
contain-intrinsic-size: inherit;
contain-intrinsic-size: initial;
contain-intrinsic-size: revert;
contain-intrinsic-size: revert-layer;
contain-intrinsic-size: unset;
Values
Either one or two of the following values may be specified for an element. If two values are specified, the first value applies to the width, and the second to the height. If a single value is specified, it applies to both width and height.
none
-
The element has no intrinsic size in the given dimension(s).
<length>
-
The element has the specified
<length>
in the given dimension(s). auto <length>
-
A remembered value of the "normally rendered" element size if one exists and the element is skipping its contents (for example, when it is offscreen); otherwise the specified
<length>
.
Description
The property is commonly applied alongside elements that can trigger size containment, such as contain: size
and content-visibility
.
Size containment allows a user agent to layout an element as though it had a fixed size, preventing unnecessary reflows by avoiding the re-rendering of child elements to determine the actual size (thereby improving user experience).
By default, size containment treats elements as though they had no contents, and may collapse the layout in the same way as if the contents had no width or height.
The contain-intrinsic-size
property allows authors to specify an appropriate value to be used as the size for layout.
The auto <length>
value allows the size of the element to be stored if the element is ever "normally rendered" (with its child elements), and then used instead of the specified length when the element is skipping its contents.
This allows offscreen elements with content-visibility: auto
to benefit from size containment without developers having to be as precise in their estimates of element size.
The remembered value is not used if the child elements are being rendered (if size containment is enabled, the <length>
will be used).
Formal definition
Initial value | as each of the properties of the shorthand:
|
---|---|
Applies to | elements for which size containment can apply |
Inherited | no |
Percentages | as each of the properties of the shorthand: |
Computed value | as each of the properties of the shorthand:
|
Animation type | as each of the properties of the shorthand:
|
Formal syntax
Examples
Setting the intrinsic size
This example provides selection lists that can be used to modify contain-intrinsic-size
, content-visibility
and contain
on an element in order to observe the effect of the different settings.
CSS
css
#contained_element {
border: 2px solid green;
width: 120px;
}
.child_element {
border: 1px solid red;
background: blue;
height: 50px;
width: 150px;
}
JavaScript
The code below adds styles to, and removes styles from, the containing element based on the selected options.
js
const containedElement = document.querySelector("#contained_element");
const intrinsicSizeSelector = document.querySelector(
"#contain_intrinsic_size_selector"
);
const containSelector = document.querySelector("#contain_selector");
const contentVisibilitySelector = document.querySelector(
"#content_visibility_selector"
);
containedElement.style["contain-intrinsic-size"] =
intrinsicSizeSelector.options[intrinsicSizeSelector.selectedIndex].text;
containedElement.style["contain"] =
containSelector.options[containSelector.selectedIndex].text;
containedElement.style["content-visibility"] =
contentVisibilitySelector.options[
contentVisibilitySelector.selectedIndex
].text;
intrinsicSizeSelector.addEventListener("change", () => {
containedElement.style["contain-intrinsic-size"] =
intrinsicSizeSelector.options[intrinsicSizeSelector.selectedIndex].text;
});
containSelector.addEventListener("change", () => {
containedElement.style["contain"] =
containSelector.options[containSelector.selectedIndex].text;
});
contentVisibilitySelector.addEventListener("change", () => {
containedElement.style["content-visibility"] =
contentVisibilitySelector.options[
contentVisibilitySelector.selectedIndex
].text;
});
HTML
The HTML defines two buttons, a container element that is subject to containment via the content-visibility
property.
html
<p>
<label for="contain_intrinsic_size_selector">contain-intrinsic-size:</label>
<select id="contain_intrinsic_size_selector">
<option>none</option>
<option>40px 130px</option>
<option>auto 40px auto 130px</option></select
>;<br />
<label for="contain_selector">contain:</label>
<select id="contain_selector">
<option>none</option>
<option>size</option>
<option>strict</option></select
>;<br />
<label for="content_visibility_selector">content-visibility:</label>
<select id="content_visibility_selector">
<option>visible</option>
<option>auto</option>
<option>hidden</option></select
>;
</p>
<div id="contained_element">
<div class="child_element"></div>
</div>
Result
Use the selectors to apply the given styles to the containing div
element.
Note that when content-visibility
is visible
or auto
, changing contain-intrinsic-size
makes no difference.
However if the content is hidden, having a contain-intrinsic-size
of none
collapses the parent element as though its child element had no size.
Specifications
Specification |
---|
CSS Box Sizing Module Level 4 # propdef-contain-intrinsic-size |
Browser compatibility
BCD tables only load in the browser