contain-intrinsic-size
======================

CSS 简写属性 **`contain-intrinsic-size`** 定义了元素受尺寸局限时浏览器用于布局的元素尺寸。

属性构成
----

此属性为下列 CSS 属性的简写属性：

* `contain-intrinsic-width`
* `contain-intrinsic-height`
语法
--


```css
/\* 关键词值 \*/
contain-intrinsic-width: none;

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

/\* 宽度 | 高度 \*/
contain-intrinsic-size: 1000px 1.5em;

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

/\* auto 宽度 | auto 高度 \*/
contain-intrinsic-size: auto 300px auto 4rem;

/\* 全局值 \*/
contain-intrinsic-size: inherit;
contain-intrinsic-size: initial;
contain-intrinsic-size: revert;
contain-intrinsic-size: unset;
```

### 取值

可为元素指定下列值中的一个或两个。若指定两值，则第一个值应用于宽度，第二个应用于高度。若指定一值，则同时应用于宽度和高度。

`none`

元素在所给方向上无固有尺寸。

`<length>`

元素在所给方向上具有指定尺寸（`<length>`）。

`auto <length>`

若存在“正常渲染”的元素尺寸且元素正在跳过其内容（例如在屏外时），则为此尺寸的记忆值；否则为指定的 `<length>`。

描述
--

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

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

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

形式定义
----

|  |  |
| --- | --- |
| 初始值 | as each of the properties of the shorthand:* `contain-intrinsic-width`: `none`
* `contain-intrinsic-height`: `none`
 |
| 适用元素 | elements for which size containment can apply |
| 是否是继承属性 | 否 |
| Percentages | as each of the properties of the shorthand:* `contain-intrinsic-width`: 否
* `contain-intrinsic-height`: 否
 |
| 计算值 | as each of the properties of the shorthand:* `contain-intrinsic-width`: as specified, with <length>s values computed
* `contain-intrinsic-height`: as specified, with <length>s values computed
 |
| Animation type | as each of the properties of the shorthand:* `contain-intrinsic-width`: by computed value type
* `contain-intrinsic-height`: by computed value type
 |

形式语法
----
```

contain-intrinsic-size =   
  [ auto? [ none | <length> ] ]{1,2}    
  
```

示例
--

### 设置固有尺寸

此示例提供了可用于修改元素的 `contain-intrinsic-size`、`content-visibility` 和 `contain` 的选项列表，以此观察不同设置的效果。

#### CSS


```css
#contained\_element {
  border: 2px solid green;
  width: 120px;
}
.child\_element {
  border: 1px solid red;
  background: blue;
  height: 50px;
  width: 150px;
}
```


#### JavaScript

下列代码根据所选选项在包含元素上添加或移除样式。


```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

此 HTML 代码定义了两个按钮和一个通过 `content-visibility` 属性受局限的包含元素。


```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>
```


#### 结果

使用选项将所给样式应用于包含元素 `div`。注意到当 `content-visibility` 为 `visible` 或 `auto` 时，改变 `contain-intrinsic-size` 不会产生区别。然而若内容被隐藏，`none` 值的 `contain-intrinsic-size` 使子元素被视为无尺寸且使父元素被折叠。

规范
--

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

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* content-visibility：提高渲染性能的新 CSS 属性（web.dev）
* `contain-intrinsic-block-size`
* `contain-intrinsic-inline-size`