contain-intrinsic-inline-size

基线 2023

新发布

自 2023 年 9 月起，此功能在最新设备和浏览器版本中均可使用。此功能可能在较旧的设备或浏览器中无法正常使用。

**contain-intrinsic-inline-size** CSS 逻辑属性 定义了元素的内联尺寸，当元素受到 尺寸约束 时，浏览器可以使用此尺寸进行布局。

内联尺寸是元素在平行于一行文本流的维度上的尺寸。在像标准英语这样的水平 书写模式 中，内联尺寸是水平维度（宽度）；对于垂直书写模式，内联尺寸是垂直维度。

语法

css
/* Keyword values */
contain-intrinsic-inline-size: none;

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

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

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

值

以下值可以指定为元素的内联尺寸

none

元素没有内联尺寸。

<length>

<length>

元素具有指定的内联尺寸 (<length>).

auto <length>

描述

当元素处于尺寸约束中并跳过其内容（例如，当它在屏幕外并且设置了 content-visibility: auto）时，内联尺寸将从元素在上次能够渲染其子元素时的实际尺寸中记住。如果元素从未渲染过其子元素，因此没有记住正常渲染的元素尺寸的值，或者如果它没有跳过其内容，则内联尺寸是指定的 <length>。

该属性通常与可以触发尺寸约束的元素一起使用，例如 contain: size 和 content-visibility.

尺寸约束允许用户代理将元素布置成好像它具有固定大小一样，通过避免重新渲染子元素来确定实际大小（从而提高用户体验）来防止不必要的回流。默认情况下，尺寸约束将元素视为没有内容，并且可能会像内容没有宽度或高度一样折叠布局。contain-intrinsic-inline-size 属性允许作者指定一个适当的值用作布局的内联尺寸。

正式定义

auto <length> 值允许存储元素的内联尺寸，如果元素曾经“正常渲染”（使用其子元素），然后在元素跳过其内容时使用，而不是使用指定的值。这允许具有 content-visibility: auto 的屏幕外元素受益于尺寸约束，而无需开发人员对其元素尺寸的估计那么精确。如果正在渲染子元素，则不会使用记住的值（如果启用了尺寸约束，则将使用 <length>）。none
初始值应用于
可以应用尺寸约束的元素继承
否计算值
如指定，带有计算的 <length> 值动画类型

正式语法

contain-intrinsic-inline-size = 
  auto? [ none | <length> ]

示例

通过计算的值类型

设置内联尺寸

下面的 HTML 定义了一个元素“contained_element”，它将受到尺寸约束，并且包含一个子元素。
<div id="contained_element">
  <div class="child_element"></div>
</div>

下面的 CSS 将 content-visibility 属性设置为 auto，这意味着如果元素被隐藏，它将被限制大小。当元素被限制大小时，使用 contain-intrinsic-block-size 和 contain-intrinsic-inline-size 属性分别设置其固有块大小和内联大小。

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

规范

规范
CSS 盒模型模块级别 4
# propdef-contain-intrinsic-inline-size

浏览器兼容性

BCD 表格只在浏览器中加载

另请参见