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

contain-intrinsic-inline-sizeプロパティは、CSSのcontainプロパティが適用された要素に対して、その要素のインライン方向における固有のサイズを定義するプロパティです。このプロパティの主な目的は、要素の実際のコンテンツがまだロードされていない、あるいはレンダリングされていない場合に、ブラウザがその要素の領域を事前に確保できるようにすることです。

特に、containプロパティにsizeまたはinline-sizeの値が設定されている場合において、要素の内部コンテンツのサイズが不明なときに重要な役割を果たします。これにより、コンテンツが後から読み込まれたり表示されたりする際に、周囲のレイアウトが突然大きく変動する「レイアウトシフト」を防ぎ、ユーザー体験を安定させることができます。ブラウザは、このプロパティで指定された仮のサイズを用いて、要素の表示領域をあらかじめ確保するため、ページの描画がよりスムーズになります。

設定できる値には、length（例: 100px）、percentage（例: 50%）、そしてautoやnoneがあります。autoはブラウザが適切なサイズを推測することを意味し、noneは固有のサイズを特に指定しないことを示します。

このプロパティで指定されたサイズは、あくまでコンテンツが未確定な間のプレースホルダーとしての役割を持ちます。実際のコンテンツが完全に読み込まれ、そのサイズが確定すると、この固有サイズよりも実際のコンテンツのサイズが優先されます。物理的な幅ではなく、書き込みモード（例: 横書き、縦書き）に応じたインライン方向のサイズを制御する点にご留意ください。

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

引数なし

引数はありません

戻り値なし

戻り値はありません