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

contain-intrinsic-widthプロパティは、CSSレイアウトにおいて、要素が持つべき固有の幅に関する情報をブラウザに提供するプロパティです。このプロパティの主な目的は、要素のコンテンツがまだ読み込まれていない、あるいは動的に生成されるためにその正確なサイズが不明な場合に、ブラウザがその要素のためにあらかじめスペースを確保できるようにすることにあります。

現代のウェブ開発では、画像、動画、広告、動的に挿入されるウィジェットなど、非同期でロードされるコンテンツが一般的です。これらのコンテンツが読み込まれるまで要素のサイズが確定しない場合、コンテンツのロード完了時に突然ページのレイアウトがずれてしまう「レイアウトシフト」が発生することがあります。このレイアウトシフトは、ユーザーの閲覧体験を著しく損ない、誤クリックなどを引き起こす原因にもなります。

contain-intrinsic-widthプロパティを使用することで、開発者は要素が最終的に持つであろう幅のヒントをブラウザに与えることができます。たとえば、「contain-intrinsic-width: 300px;」と指定することで、コンテンツがロードされる前に幅300ピクセルのスペースが確保されます。これにより、コンテンツが後からロードされても、ページの全体的なレイアウトが予期せず変更されるのを防ぎ、ウェブサイトの視覚的な安定性が向上します。

このプロパティは通常、containプロパティ（特にcontain: sizeやcontain: layout）と組み合わせて使用され、要素の幅だけでなく高さも指定する場合はcontain-intrinsic-heightプロパティと併用します。具体的な数値を指定することで、より確実なレイアウト安定化が期待できるため、ウェブパフォーマンスの最適化、特にCumulative Layout Shift (CLS) スコアの改善に有効なツールとなります。

Copy
1.element {
2  contain-intrinsic-width: 200px;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません