contain-intrinsic-block-size

Baseline 2023
Newly available

Since September 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

CSS 逻辑属性 contain-intrinsic-block-size 定义了元素受尺寸局限时浏览器用于布局的元素块向尺寸。

块向尺寸为元素在垂直于行内文本流的方向上的尺寸。在如标准英文等横向书写模式（writing-mode）中，块向尺寸为纵向尺度（高度）；在纵向书写模式中，块向尺寸为横向尺度。

语法

css
/* 关键词值 */
contain-intrinsic-block-size: none;

/* <length> 值 */
contain-intrinsic-block-size: 1000px;
contain-intrinsic-block-size: 10rem;

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

/* 全局值 */
contain-intrinsic-block-size: inherit;
contain-intrinsic-block-size: initial;
contain-intrinsic-block-size: revert;
contain-intrinsic-block-size: revert-layer;
contain-intrinsic-block-size: unset;

取值

元素的固有块向尺寸可指定为下列值：

none

元素无固有块向尺寸。

<length>

元素具有指定的块向尺寸，以 <length> 数据类型表示。

auto <length>

当元素在尺寸局限中且正在跳过其内容（例如元素在屏外且设置了 content-visibility: auto）时，块向尺寸为记忆值——即元素在上次渲染其子元素时的实际尺寸。若元素从未渲染其子元素导致无正常渲染时的元素尺寸的记忆值，或者元素未在跳过其内容，块向尺寸为指定的 <length>。

描述

此属性的应用常常伴随如 contain: size 和 content-visibility 等可触发尺寸局限的要素。

尺寸局限允许用户代理将元素视为具有固定尺寸进行布局。由此避免为确定实际尺寸而重渲子元素，阻止不必要的重排（进而改善用户体验）。尺寸局限默认将元素视为不包含内容，且可按与内容无宽度或高度相同的方式折叠布局。contain-intrinsic-block-size 允许作者为布局所用的块向尺寸指定合适的值。

auto <length> 值允许元素“被正常渲染”（包括其子元素）后存储其块向尺寸，再在元素不包含任何内容时使用此值而非指定值。由此允许有 content-visibility: auto 的屏外元素无需开发者精确估计元素尺寸即可受益于尺寸局限。在子元素渲染时，不使用记忆值；若启用尺寸局限，则将使用 <length> 值。

形式定义

初始值none
适用元素可应用尺寸局限的元素
是否是继承属性否
计算值as specified, with <length>s values computed
动画类型按计算值的类型

形式语法

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

示例

设置固有块向尺寸

下列 HTML 代码定义了将受尺寸限制的元素“contained_element”，此元素包含一个子元素。

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

下列 CSS 代码将 contained_element 的 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;
}

规范

Specification
CSS Box Sizing Module Level 4
# propdef-contain-intrinsic-block-size

浏览器兼容性

BCD tables only load in the browser

参见