【CSS Modules】contain-intrinsic-heightプロパティの使い方

contain-intrinsic-height プロパティは、CSSの要素において、そのコンテンツがまだ読み込まれていない状態でも要素が持つべき本来の（内在的な）高さを指定する値を保持するプロパティです。このプロパティは、ブラウザが要素の実際のコンテンツのサイズを把握する前に、要素が占めるおおよその領域を「仮置き」する目的で利用されます。これにより、特に画像や動画、複雑なコンポーネントなど、遅延読み込みされるコンテンツが含まれるWebページで、コンテンツが読み込まれる際に発生する予期せぬレイアウトのズレ（レイアウトシフト）を防ぎ、ユーザー体験を向上させることができます。

具体的には、Webページをスクロールする際、まだ画面に表示されていない要素（オフスクリーン要素）が読み込まれるとき、ブラウザはその要素の高さを知らないと一時的に0pxとして扱ってしまうことがあります。その結果、要素が完全に読み込まれた瞬間にページのレイアウトが突然大きく変動し、ユーザーの操作を妨げる可能性があります。contain-intrinsic-height プロパティにあらかじめ高さを指定しておくことで、ブラウザはその指定された高さを予約し、コンテンツの読み込み中もレイアウトの安定性を維持します。

このプロパティは、通常 contain プロパティの size 値、または layout 値が適用された要素と組み合わせて使用されます。設定できる値には、auto（自動）、具体的な長さ（例: 200px）、または none（内在的な高さを指定しない）などがあります。例えば、contain-intrinsic-height: 300px; と設定すると、ブラウザはコンテンツが完全に表示されるまでその要素の高さを300ピクセルとして扱います。これは、パフォーマンスが重要なWebアプリケーションや、スムーズな閲覧体験を提供したい場合に非常に効果的な手法です。

Copy
1contain-intrinsic-height: 200px;

引数なし

引数はありません

戻り値なし

戻り値はありません