概要

contain-intrinsic-inline-sizeは、CSSのcontainプロパティと関連するサブプロパティで、要素の「固有のインラインサイズ（幅）」を指定するためのものです。このプロパティは、コンテンツが未ロードの状態でも指定した幅を保つことで、レイアウトのシフトを防ぎ、ユーザーエクスペリエンスの向上に寄与します。特に、画像や動画などのメディア要素や非同期に読み込まれるコンテンツにおいて、レイアウトの安定性を維持するのに役立ちます。

contain-intrinsic-inline-sizeとは

contain-intrinsic-inline-sizeは、containプロパティの一部として使用され、要素の幅を指定します。このプロパティを設定することで、要素のインラインサイズが明確になり、ページのロード時やコンテンツの動的な変化に影響されずに、安定したレイアウトを維持できます。これにより、コンテンツの読み込み状況にかかわらず、視覚的な一貫性を保つことができます。

使用方法

contain-intrinsic-inline-sizeは、containプロパティと併用して使用されることが多く、特にsizeやlayoutと組み合わせることで、指定したインラインサイズの効果を最大限に引き出せます。

基本構文

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

パラメータ

  • 数値（px, em, remなど）
    要素のインラインサイズを指定します。このサイズは、コンテンツの読み込み状態に関係なく適用されます。
  • auto
    要素の幅をコンテンツに合わせて自動調整します（デフォルト）。

具体的な使用例

固定インラインサイズでレイアウトのシフトを防ぐ

以下の例では、画像が読み込まれる前でも指定の幅を保持するためにcontain-intrinsic-inline-sizeを使用しています。これにより、レイアウトが崩れることなく、ユーザーが安定したページを閲覧できます。

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

レスポンシブデザインで幅を調整

contain-intrinsic-inline-sizeを用いて、レスポンシブデザインにも対応可能です。デバイスの画面幅に応じて相対的なサイズ（vwなど）を使用することで、要素が画面サイズに合わせて変動します。

.responsive-box {
  contain: layout;
  contain-intrinsic-inline-size: 50vw; /* ビューポートの50%の幅 */
}

テキストボックスやフォームのサイズ調整

動的なコンテンツが含まれるテキストボックスやフォーム要素においても、インラインサイズを固定することで、入力内容の増減によるレイアウトのシフトを防げます。

.input-field {
  contain: size;
  contain-intrinsic-inline-size: 300px;
  overflow-x: auto;
}

注意点

  • contain-intrinsic-inline-sizeは、containプロパティのsizeやlayoutとセットで使用することが推奨されます。これにより、意図したレイアウト効果が確実に得られます。
  • 相対的な単位（%やvwなど）を使用する際には、画面サイズや親要素のサイズに依存するため、デザインに応じて適切に設定する必要があります。
  • サイズの指定によってスクロールバーの表示が発生する場合があるため、overflowプロパティの設定も適切に行うことが重要です。

実際のユースケース

  • メディアのプレースホルダー
    動画や画像などのメディアが未読み込みの際に、指定のインラインサイズを保持し、ページ全体のレイアウトを崩さずに保ちます。

  • 広告バナーや埋め込みコンテンツ
    広告や外部埋め込みコンテンツの幅を固定することで、コンテンツが動的に変わる際のレイアウトシフトを防ぎます。

  • 非同期データの読み込み
    動的に変化するコンテンツのインラインサイズを固定し、描画の際にレイアウトが影響を受けないようにします。

まとめ

contain-intrinsic-inline-sizeは、CSSの中で要素のインラインサイズをコントロールするために非常に有効なプロパティです。特に、コンテンツが未ロードの状態でも指定のサイズを保つことで、レイアウトの一貫性を確保でき、視覚的なシフトを防ぎます。このプロパティを活用することで、ウェブページの見た目を安定させ、ユーザーにとってストレスの少ないブラウジング体験を提供することが可能になります。

参照:

`CSS` Containment | MDN Web Docs