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