contain-intrinsic-height
Baseline 2023
Newly available
Since September 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
構文
/* キーワード値 */
contain-intrinsic-height: none;
/* <length> 値 */
contain-intrinsic-height: 1000px;
contain-intrinsic-height: 10rem;
/* auto <length> */
contain-intrinsic-height: auto 300px;
/* グローバル値 */
contain-intrinsic-height: inherit;
contain-intrinsic-height: initial;
contain-intrinsic-height: revert;
contain-intrinsic-height: revert-layer;
contain-intrinsic-height: unset;
値
以下の値が要素に指定できます。
none
-
この要素に内在の高さはありません。
<length>
-
この要素には指定された高さ (
<length>
) があります。 auto <length>
-
その要素に「通常レンダリングされる」要素の高さの値が存在し、そのコンテンツをスキップする場合(例えば、その要素が画面外にある場合)の記憶値です。そうでなければ
<length>
が指定されます。
解説
このプロパティは、contain.size
や content-visibility
のような、サイズ拘束が発生する要素の横に並んだプロパティとして一般的に適用され、contain-intrinsic-size
一括指定プロパティを使用して設定することもできます。
サイズ拘束により、ユーザーエージェントは要素が固定されたサイズであるかのようにレイアウトすることができ、実際のサイズを決定するための子要素の再描画を避けることで不必要な再フローを防ぐことができます(これにより、ユーザーの使い心地が向上します)。
既定では、サイズ拘束は要素をコンテンツがないものとして扱い、コンテンツに高さ(または幅)がない場合と同じ方法でレイアウトを崩す可能性があります。
contain-intrinsic-height
プロパティにより、レイアウトに使用する高さを指定することができます。
auto <length>
値は、要素が(子要素とともに)「通常レンダリング」される場合に要素の高さを格納し、要素がその内容をスキップするときに指定した高さの代わりに使用することができます。
これにより、content-visibility: auto
を持つ画面外の要素は、開発者が要素のサイズを正確に推定することなく、サイズ拘束の恩恵を受けることができます。
子要素がレンダリングされる場合、記憶された値は使用されません(サイズ拘束が有効な場合、<length>
が使用されます)。
公式定義
初期値 | none |
---|---|
適用対象 | elements for which size containment can apply |
継承 | なし |
計算値 | as specified, with <length>s values computed |
アニメーションの種類 | 計算値の型による |
形式文法
例
下記の例の他に、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;
}
仕様書
Specification |
---|
CSS Box Sizing Module Level 4 # propdef-contain-intrinsic-height |
ブラウザーの互換性
BCD tables only load in the browser