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

contain-intrinsic-block-sizeプロパティは、CSSレイアウトにおいて、要素のブロック方向の論理的な固有サイズを保持するプロパティです。このプロパティは、主にcontent-visibilityプロパティやcontain: sizeプロパティと組み合わせて使用され、ウェブページのパフォーマンス最適化に重要な役割を果たします。

ウェブページでは、すべてのコンテンツが同時にロードされるわけではなく、特に画面外にある要素は、表示されるまでレンダリングが遅延されることがあります。しかし、このように要素のレンダリングを遅延させると、その要素が本来占めるべきスペースが事前に確保されず、コンテンツが読み込まれて表示された際に、他の要素が予期せず移動してしまう「レイアウトシフト」が発生する可能性があります。これはユーザー体験を損なう要因となります。

contain-intrinsic-block-sizeプロパティは、このようなレイアウトシフトを防ぐために、まだ表示されていない、あるいはロード中の要素に対して、ブロック方向における予測されるサイズ（例: 通常のテキストフローでは高さ、日本語の縦書きフローでは幅に相当します）を事前に指定することを可能にします。これにより、ブラウザは要素のコンテンツが実際にレンダリングされる前から、その要素が占める空間を確保できるようになります。

例えば、200pxといった具体的な長さを指定することで、その要素がブロック方向に200pxの空間を予約します。要素のコンテンツが実際にそのサイズと異なる場合でも、この予約されたサイズが初期レイアウトに使用されます。この機能により、ブラウザは効率的にレイアウトを処理し、コンテンツの読み込みや表示によるページのガタつきを最小限に抑え、よりスムーズなユーザー体験を提供することに貢献します。

Copy
1.element {
2  contain-intrinsic-block-size: 100px;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません