contain-intrinsic-width

语法

/* Keyword values */
contain-intrinsic-width: none;

/* <length> values */
contain-intrinsic-width: 1000px;
contain-intrinsic-width: 10rem;

/* auto <length> */
contain-intrinsic-width: auto 300px;

/* Global values */
contain-intrinsic-width: inherit;
contain-intrinsic-width: initial;
contain-intrinsic-width: revert;
contain-intrinsic-width: revert-layer;
contain-intrinsic-width: unset;

值

可以为元素指定以下值。

none

该元素没有固有宽度。

<length>

该元素具有指定的宽度（<length>）。

auto <length>

如果存在“正常渲染”的元素宽度的记忆值并且元素正在跳过其内容（例如，当它在屏幕外时），则使用该记忆值；否则使用指定的<length>。

描述

该属性通常与可以触发尺寸约束的元素一起应用，例如 contain: size 和 content-visibility，也可以使用 contain-intrinsic-size 简写属性设置。

尺寸约束允许用户代理将元素布局为具有固定大小，通过避免重新渲染子元素来确定实际大小（从而改善用户体验），从而防止不必要的重排。默认情况下，尺寸约束将元素视为没有内容，并可能以与内容没有宽度或高度相同的方式折叠布局。contain-intrinsic-width 属性允许作者指定一个合适的值作为布局宽度。

auto <length> 值允许在元素“正常渲染”（包含其子元素）时存储元素的宽度，然后在元素跳过其内容时使用该值而不是指定的宽度。这使得屏幕外具有 content-visibility: auto 的元素可以受益于尺寸约束，而开发人员无需对其元素大小的估计过于精确。如果子元素正在渲染（如果启用了尺寸约束，则将使用 <length>），则不使用记忆值。

正式定义

正式语法

contain-intrinsic-width = 
  auto? [ none | <length [0,∞]> ]  

示例

除了下面的示例之外，contain-intrinsic-size 页面还包含一个实时示例，演示了修改固有宽度和高度的效果。

设置固有宽度

下面的 HTML 定义了一个将受到尺寸约束的元素“contained_element”，该元素包含一个子元素。

<div id="contained_element">
  <div class="child_element"></div>
</div>

下面的 CSS 将 contained_element 的 content-visibility 设置为 auto，因此如果元素被隐藏，它将受到尺寸约束。当它受到尺寸约束时使用的宽度和高度分别通过 contain-intrinsic-width 和 contain-intrinsic-height 同时设置。

#contained_element {
  border: 2px solid green;
  width: 151px;
  content-visibility: auto;
  contain-intrinsic-width: 152px;
  contain-intrinsic-height: 52px;
}
.child_element {
  border: 1px solid red;
  background: blue;
  height: 50px;
  width: 150px;
}

规范

浏览器兼容性

另见

• content-visibility：提升渲染性能的全新 CSS 属性 (web.dev)
• contain-intrinsic-size
• contain-intrinsic-height
• contain-intrinsic-block-size
• contain-intrinsic-inline-size