contain-intrinsic-size

Baseline 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。

尺寸限制允許使用者代理像佈局一個具有固定尺寸的元素一樣佈局它，透過避免為確定實際尺寸而重新渲染子元素來防止不必要的迴流（從而改善使用者體驗）。預設情況下，尺寸限制將元素視為沒有內容，並可能以與內容沒有寬度或高度相同的方式摺疊佈局。contain-intrinsic-size 屬性允許開發者指定一個適當的值用作佈局尺寸。

auto <length> 值允許在元素“正常渲染”（即包含其子元素）時儲存其尺寸，然後在元素跳過其內容時使用該尺寸，而不是使用指定的長度。這使得設定了 content-visibility: auto 的螢幕外元素能夠從尺寸限制中受益，而開發者無需在估計元素尺寸時那麼精確。如果子元素正在被渲染，則不會使用記憶值（如果啟用了尺寸限制，將使用 <length>）。

在網格和多列布局中，顯式尺寸的處理方式與隱式的基於內容的尺寸不同。元素的佈局可能會與其簡單地用內容填充到那個高度時的佈局有很大不同。auto none 值允許在沒有記憶值的情況下，元素回退到 contain-intrinsic-size: none，這將允許元素像沒有內容一樣進行佈局。在網格和多列布局中，這幾乎總是比將固有尺寸設定為 0px 更好，因為在這種情況下，受限元素可能會溢位其父元素，並可能導致意外的頁面佈局。

正式定義

初始值	作為簡寫中的每個屬性 `contain-intrinsic-width`: `none` `contain-intrinsic-height`: `none`
應用於	可應用尺寸限制的元素
繼承性	否
百分比	作為簡寫中的每個屬性 `contain-intrinsic-width`: no `contain-intrinsic-height`: no
計算值	作為簡寫中的每個屬性 `contain-intrinsic-width`：按照指定值，計算 <length> 的值 `contain-intrinsic-height`：按照指定值，計算 <length> 的值
動畫型別	作為簡寫中的每個屬性 `contain-intrinsic-width`: 根據計算值的型別 `contain-intrinsic-height`: 根據計算值的型別

正式語法

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

示例

為固有尺寸使用 auto 值對

此示例演示了 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 Box Sizing Module Level 4 # propdef-contain-intrinsic-size

瀏覽器相容性

另見

contain-intrinsic-block-size
contain-intrinsic-inline-size
使用 CSS 隔離
CSS 限制模組
content-visibility：提升渲染效能的新 CSS 屬性（來自 web.dev，2020 年）

幫助改進 MDN

瞭解如何貢獻

此頁最後修改於 ⁨2025⁩年⁧7⁩月⁧14⁩日，由 MDN 貢獻者修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題