contain-intrinsic-size

基线 2023

新增功能

自从 2023 年 9 月，此功能在最新设备和浏览器版本中可用。此功能可能在旧设备或浏览器中不可用。

contain-intrinsic-size CSS 简写属性设置元素的大小，当元素受到大小包含时，浏览器将使用该大小进行布局。

语法

css

/* Keyword values */
contain-intrinsic-size: 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;
contain-intrinsic-size: auto none;

/* 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;

值

以下值可用于 contain-intrinsic-size 属性

none: 元素在给定维度上没有内在大小。
<length>: 元素在给定维度上具有指定的 <length>。
auto [<length> | none]: 如果存在，则为“正常渲染”元素大小的记忆值，如果元素正在跳过其内容（例如，当元素位于屏幕外时），则为指定的 <length>。当 0px 固定长度与 none 的行为不同时（例如，在多列或网格布局中），可以使用 none 关键字代替 <length>。

如果提供一个值作为关键字、长度或 auto [<length> | none] 对，则该值将应用于宽度和高度。

可以指定两个长度值，分别应用于宽度和高度。如果指定了两个 auto [<length> | none] 对，则第一对应用于宽度，第二对应用于高度。

描述

该属性通常与可以触发大小包含的元素一起应用，例如 contain: size 和 content-visibility。

大小包含允许用户代理将元素布局为具有固定大小，通过避免重新渲染子元素以确定实际大小（从而改善用户体验）来防止不必要的重排。

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

在网格和多列布局中，显式大小的处理方式不同于隐式基于内容的高度。元素的布局可能与仅用内容填充到该高度时有很大不同。auto none 值允许元素在没有记住的值的情况下回退到 contain-intrinsic-size: none，这将允许元素像没有内容一样进行布局。在网格和多列布局中，这几乎总是比将内在大小设置为 0px 更可取，因为包含的元素可能会溢出其父级，并可能导致意外的页面布局。

正式定义

初始值	作为每个速记属性 `contain-intrinsic-width`: `none` `contain-intrinsic-height`: `none`
应用于	可以应用大小包含的元素
继承	否
百分比	作为每个速记属性 `contain-intrinsic-width`: 否 `contain-intrinsic-height`: 否
计算值	作为每个速记属性 `contain-intrinsic-width`: 如指定，计算 <length> 值 `contain-intrinsic-height`: 如指定，计算 <length> 值
动画类型	作为每个速记属性 `contain-intrinsic-width`: 按计算值类型 `contain-intrinsic-height`: 按计算值类型

正式语法

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

示例

使用自动值对表示内在大小

此示例演示了 contain-intrinsic-size: auto <length> 和 contain-intrinsic-size: auto none，使用一个布局，其中有许多元素垂直显示，它们都有准确和不准确的内在大小估计。使用 content-visibility: auto 在元素超出屏幕范围时跳过渲染，因此该属性是与 contain-intrinsic-size 结合以提高渲染性能并最小化重排的一个好选择。

contain-intrinsic-size: auto 500px 值对告诉浏览器在元素超出屏幕范围且页面正在布局时，使用 500px 作为元素的“占位符”大小（宽度和高度）。当用户滚动到元素并需要显示它时，浏览器将计算元素及其内容的实际大小。如果占位符大小和计算大小之间存在差异，这可能会强制进行新的布局，并伴随对侧边栏位置的更改。

一旦浏览器拥有元素的实际大小信息，它就会在元素再次滚动出屏幕时记住该大小，并在布局计算中使用记住的大小，而不是占位符值。好处是浏览器不需要重复渲染元素内容来计算其大小，并且在内容很复杂或依赖于网络资源或 JavaScript 时尤其有用。

HTML

html

<div id="container">
  <div id="auto-length-note">
    <p>
      Your browser does not support
      <code>contain-intrinsic-size: auto &lt;length&gt;</code>.
    </p>
  </div>
  <div class="auto-length">
    <p>Item one</p>
  </div>
  <div class="auto-length">
    <p>Item two</p>
  </div>
  <div class="auto-length large-intrinsic-size">
    <p class="small">Item three</p>
  </div>
  <div class="auto-length large-intrinsic-size">
    <p class="small">Item four</p>
  </div>
  <div id="auto-none-note">
    <p>
      Your browser does not support
      <code>contain-intrinsic-size: auto none</code>.
    </p>
  </div>
  <div class="auto-length none">
    <p>Item five</p>
  </div>
  <div class="auto-length none">
    <p>Item six</p>
  </div>
</div>

CSS

div,
p {
  padding: 1rem;
  margin-bottom: 1rem;
  font-size: 2rem;
  font-family: sans-serif;
}

code {
  background-color: lightgray;
  padding: 0.25rem;
  border-radius: 0.25rem;
}

#container {
  width: 90%;
  height: 80%;
}

.auto-length,
.auto-length.none {
  display: none;
}

#auto-length-note,
#auto-none-note {
  display: block;
  padding: 0;
}

#auto-length-note p,
#auto-none-note p {
  padding: 0.5rem;
  width: 100%;
  height: max-content;
  font-size: 1rem;
  line-height: 1.5rem;
  background-color: tomato;
}

@supports (contain-intrinsic-size: auto none) {
  .auto-length.none {
    display: block;
  }
  #auto-none-note {
    display: none;
  }
}
@supports (contain-intrinsic-size: auto 500px) {
  .auto-length {
    display: block;
  }
  #auto-length-note {
    display: none;
  }
}

css

p {
  height: 500px;
  width: 500px;
  border: 4px dotted;
  background: lightblue;
}

.auto-length {
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
  background-color: linen;
  outline: 4px dotted blue;
}

.large-intrinsic-size {
  /* Setting an inaccurate intrinsic size for the element */
  contain-intrinsic-size: auto 5000px;
  background-color: lightgray;
  outline: 4px dotted red;
}

.small {
  /* This element is a lot smaller than expected */
  height: 100px;
  width: 100px;
}

.none {
  background-color: papayawhip;
  contain-intrinsic-size: auto none;
  outline: 4px dotted red;
}

结果

前两个框的内在大小与其实际大小相匹配，因此当它们滚动到视图中时，布局会重新计算，但我们看不到滚动条或滚动位置发生变化。
第三和第四个框具有巨大的内在大小，因此浏览器计算的初始布局太大，我们已经使这些框更小，以便当您到达强制进行大幅度布局更改的点时，这一点很明显。当第三和第四个框滚动到视图中时，大小会重新计算，使框及其父级的高度变小。效果是滚动条跳到页面下方（我们实际上滚动通过框比我们估计的更远），并且滚动条更长，因为整个页面比我们估计的更短。
最后几个框具有 auto none，因此它们的估计大小为零。当它们滚动到视图中时，元素及其父级的大小会重新计算，变得更大，因此滚动条的大小减小并向上移动。

在滚动到底部后，您可以随后顺利地上下滚动，因为使用 content-visibility: auto 会在下一次显示元素时保存元素的实际渲染大小。

设置内在大小

此示例提供选择列表，可用于修改 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

以下代码根据所选选项向包含元素添加样式，并从包含元素中删除样式。

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 不会产生任何影响。但是，如果内容隐藏，并且 contain-intrinsic-size 为 none，则父元素会像其子元素没有大小一样折叠。

规范

规范
CSS 盒模型规范第 4 级 # propdef-contain-intrinsic-size

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅

contain-intrinsic-block-size
contain-intrinsic-inline-size
使用 CSS 包含
CSS 包含模块
content-visibility: 新的 CSS 属性，可提升渲染性能通过 web.dev (2020)