contain-intrinsic-block-size

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-block-size は CSS の論理プロパティで、要素がサイズ拘束の対象となっている場合に、ブラウザーがレイアウトに使用することができる要素のブロックサイズを定義します。

ブロックサイズとは、行内のテキストの流れに対して垂直方向の要素のサイズのことです。標準的な英語のような横書きの書字方向では、ブロックサイズは垂直方向（高さ）です。縦書きの場合、ブロックサイズは水平方向です。

構文

css
/* キーワード値 */
contain-intrinsic-block-size: none;

/* <length> 値 */
contain-intrinsic-block-size: 1000px;
contain-intrinsic-block-size: 10rem;

/* auto <length> */
contain-intrinsic-block-size: auto 300px;

/* グローバル値 */
contain-intrinsic-block-size: inherit;
contain-intrinsic-block-size: initial;
contain-intrinsic-block-size: revert;
contain-intrinsic-block-size: revert-layer;
contain-intrinsic-block-size: unset;

値

要素の内在ブロックサイズには以下の値を指定することができます。

none

この要素に内在するブロックサイズはありません。

<length>

要素は、(<length>) データ型を使用して表現される、指定したブロックサイズです。

auto <length>

要素がサイズ拘束にあり、そのコンテンツをスキップしているとき（例えば、画面外にあり、content-visibility: auto が設定されているとき）、ブロックサイズは、最後に子要素をレンダリングできたときの要素の実際のサイズから記憶されます。 要素が子要素を一度もレンダリングしたことがなく、したがって通常レンダリングされる要素サイズの値が記憶されていない場合、またはコンテンツをスキップしていない場合、ブロックサイズは指定した <length> になります。

解説

このプロパティは、contain: size や content-visibility のような、サイズ拘束を発生させる要素に沿ったプロパティとして一般的に適用されます。

サイズ拘束により、ユーザーエージェントは、要素が固定サイズであるかのようにレイアウトすることができます。 これは、実際のサイズを決定するために子要素の再描画を避けることによって、不必要なリフローを防ぎます（それによって、ユーザー体験を向上させます）。 既定では、サイズ拘束は要素をコンテンツを持たないものとして扱い、コンテンツに幅や高さがないのと同じ方法でレイアウトを崩すことができます。 contain-intrinsic-block-size プロパティにより、レイアウトのブロックサイズとして使用する適切な値を指定することができます。

auto <length> 値は、要素が（子要素とともに）「通常レンダリング」される場合に要素のブロックサイズを格納し、要素がコンテンツを持っていない場合に指定した値の代わりに使用することができます。 これにより、content-visibility: auto を持つ画面外の要素は、開発者が要素のサイズを正確に推定することなく、サイズ拘束の恩恵を受けることができます。 子要素がレンダリングされる場合、記憶された値は使用されません。サイズ拘束が有効な場合、<length> の値が使用されます。

公式定義

初期値none
適用対象elements for which size containment can apply
継承なし
計算値as specified, with <length>s values computed
アニメーションの種類計算値の型による

形式文法

contain-intrinsic-block-size = 
  auto? [ none | <length> ]

例

内在ブロックサイズの設定

下記 HTML は、サイズ拘束の対象となり、子要素を格納する要素 "contained_element" を定義しています。

html
<div id="contained_element">
  <div class="child_element"></div>
</div>

下記の CSS では、contained_element の content-visibility を auto に設定するので、要素が非表示になるとサイズが拘束されます。 サイズ拘束されるときに使用する内在ブロックサイズとインラインサイズは、それぞれ contain-intrinsic-block-size と contain-intrinsic-inline-size を使用して同時に設定します。

css
#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;
}

仕様書

Specification
CSS Box Sizing Module Level 4
# propdef-contain-intrinsic-block-size

ブラウザーの互換性

BCD tables only load in the browser

関連情報