概要

contain-intrinsic-heightは、CSSのcontainプロパティと関連したサブプロパティで、要素の「固有の高さ」を指定するためのものです。このプロパティは、コンテンツが未ロードの状態でも指定した高さを保ち、レイアウトの安定性を維持するために使用されます。特に、画像や動画などのメディア要素を含むレイアウトで、未読み込み時の高さを確保し、レイアウトのシフトを防ぐために役立ちます。

contain-intrinsic-heightとは

contain-intrinsic-heightは、CSSのcontainプロパティの一部で、要素の高さを指定する機能を持っています。このプロパティを設定することで、要素が描画される際の高さを明確にし、コンテンツの読み込み状況にかかわらずレイアウトの一貫性を保てます。これにより、ページの初期ロード時やコンテンツの非同期読み込み時におけるレイアウトのズレを防ぎ、ユーザーエクスペリエンスを向上させます。

使用方法

contain-intrinsic-heightは、containプロパティとセットで使用されることが多く、特にsizeやlayoutと組み合わせることで、指定した高さを有効に活用できます。これにより、要素がどのように表示されるかを細かく制御できます。

基本構文

.element {
  contain: size layout;
  contain-intrinsic-height: 300px;
}

パラメータ

  • 数値（px, em, remなど）
    要素の固有の高さを設定します。指定された単位で高さを固定します。

  • auto
    要素の高さをコンテンツに合わせて自動調整します（デフォルト）。

具体的な使用例

固定の高さを設定してレイアウトの崩れを防ぐ

以下の例では、画像や動画がロードされる前でも指定された高さを保つためにcontain-intrinsic-heightを使用しています。この設定により、読み込みが遅れてもレイアウトの安定性を維持できます。

.image-placeholder {
  contain: size layout;
  contain-intrinsic-height: 200px;
  background-color: #f0f0f0; /* プレースホルダーの背景色 */
}

レスポンシブデザインで高さを制御

レスポンシブデザインにおいて、画面のサイズに応じて高さを変動させるために、vh（ビューポートの高さ）などの相対単位を使うことも可能です。これにより、ユーザーのデバイスに応じた調整が行われます。

.responsive-element {
  contain: layout;
  contain-intrinsic-height: 50vh; /* 画面の50%の高さ */
}

ダイナミックコンテンツの高さを一定にする

ダイナミックにコンテンツが変動する要素の高さを一定に保ちたい場合にも使用できます。例えば、チャットボックスや動的に更新されるリストなどで、高さの変動を防ぎます。

.dynamic-content {
  contain: size;
  contain-intrinsic-height: 150px;
  overflow-y: auto;
}

注意点

  • contain-intrinsic-heightはcontainプロパティとセットで使用しないと意図した効果を発揮しません。特に、sizeやlayoutの指定が必要です。
  • 高さの単位を使用する際は、絶対単位（pxなど）だけでなく、レスポンシブデザインには相対単位（vh, %など）を使うことが推奨されます。
  • 高さを固定することで、意図しないスクロールバーの表示が発生する可能性がありますので、overflowプロパティの設定も考慮しましょう。

実際のユースケース

  • メディアのプレースホルダー
    画像や動画が未ロードの際に指定の高さを確保し、コンテンツが遅れても見た目のレイアウトを保つことができます。

  • 広告や埋め込みコンテンツ
    広告バナーや外部からの埋め込みコンテンツの高さを制御し、レイアウトシフトを防ぎます。

  • 非同期コンテンツの高さ制御
    JavaScriptで動的に更新されるコンテンツの高さを設定し、描画される前後でのレイアウトの変更を抑えます。

まとめ

contain-intrinsic-heightは、要素の固有の高さを指定してレイアウトの安定性を保つためのCSSプロパティです。特に、コンテンツが未ロードの際にもレイアウトを安定させる点で、ユーザーエクスペリエンスの向上に大きく寄与します。これを活用することで、ページ全体のパフォーマンス最適化と視覚的な一貫性を維持することが可能になります。

参照:

`CSS` Containment | MDN Web Docs