contain-intrinsic-inline-size
contain-intrinsic-inline-size CSS 邏輯屬性 定義了元素在受 尺寸限制 時，瀏覽器可用於佈局的內聯尺寸。
內聯尺寸是元素在與行內文字流平行的維度上的尺寸。在像標準英語這樣的水平 書寫模式 中，內聯尺寸是水平維度（寬度）；對於垂直書寫模式，內聯尺寸是垂直維度。
語法
/* Keyword values */
contain-intrinsic-inline-size: none;
/* <length> values */
contain-intrinsic-inline-size: 1000px;
contain-intrinsic-inline-size: 10rem;
/* auto <length> */
contain-intrinsic-inline-size: auto 300px;
/* Global values */
contain-intrinsic-inline-size: inherit;
contain-intrinsic-inline-size: initial;
contain-intrinsic-inline-size: revert;
contain-intrinsic-inline-size: revert-layer;
contain-intrinsic-inline-size: unset;
值
可以為元素的固有內聯尺寸指定以下值
none-
該元素沒有固有的內聯尺寸。
<length>-
元素具有指定的內聯尺寸（
<length>）。 auto <length>-
當元素處於尺寸限制並跳過其內容（例如，當它在螢幕外且設定了
content-visibility: auto時），內聯尺寸會記住元素上次能夠渲染其子元素時的實際尺寸。如果元素從未渲染其子元素，因此沒有通常渲染的元素尺寸的記憶值，或者如果它沒有跳過其內容，則內聯尺寸是指定的<length>。
描述
該屬性通常與可以觸發尺寸限制的元素一起使用，例如 contain: size 和 content-visibility。
尺寸限制允許使用者代理將元素佈局為固定尺寸，透過避免重新渲染子元素以確定實際尺寸來防止不必要的重排（從而改善使用者體驗）。預設情況下，尺寸限制將元素視為沒有內容，並且可能像內容沒有寬度或高度一樣摺疊佈局。contain-intrinsic-inline-size 屬性允許作者指定一個適當的值用作佈局的內聯尺寸。
auto <length> 值允許在元素“正常渲染”（帶有其子元素）時儲存元素的內聯尺寸，然後在元素跳過其內容時使用該值而不是指定值。這使得帶有 content-visibility: auto 的螢幕外元素能夠受益於尺寸限制，而開發人員無需對其元素尺寸的估算過於精確。如果正在渲染子元素，則不使用記憶值（如果啟用了尺寸限制，將使用 <length>）。
正式定義
正式語法
contain-intrinsic-inline-size =
auto? [ none | <length [0,∞]> ]
示例
設定固有內聯尺寸
下面的 HTML 定義了一個將受到尺寸約束的元素“contained_element”，該元素包含一個子元素。
<div id="contained_element">
<div class="child_element"></div>
</div>
下面的 CSS 將 contained_element 的 content-visibility 設定為 auto，因此如果元素被隱藏，它將受到尺寸限制。在尺寸限制時使用的固有塊尺寸和內聯尺寸分別使用 contain-intrinsic-block-size 和 contain-intrinsic-inline-size 同時設定。
#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;
}
規範
| 規範 |
|---|
| CSS Box Sizing Module Level 4 # propdef-contain-intrinsic-inline-size |
瀏覽器相容性
載入中…