CSS の contains 属性の役割と構文

CSS における contains 構文の役割

CSS では、contain は要素のレイアウトとレンダリングに影響を与える非常に便利な属性です。その主な機能は、要素のコンテンツを処理する方法と、要素と他の要素の間の関係を制御する方法をブラウザに伝えることです。

contain 属性には、none、strict、content、size の 4 つのオプションの値があります。以下では、各値の役割について詳しく説明し、対応するコード例を示します。

1. none: これは contains 属性のデフォルト値で、要素のコンテンツが親要素または他の要素に自由にオーバーフローできることを示します。これも従来の CSS の動作です。

サンプル コード:

.container {
  contain: none;
  width: 200px;
  height: 200px;
  border: 1px solid black;
  overflow: hidden;
}

.text {
  width: 300px;
  height: 300px;
  background-color: red;
}

上記のコードでは、コンテナ div の幅と高さは両方とも 200 ピクセルで、overflow:hidden が設定されています。テキスト div の幅と高さは両方とも 300 ピクセルで、コンテナーのサイズを超えています。 contains 属性値が none に設定されているため、テキストはコンテナーの外にオーバーフローします。

2. strict: この値は、要素が境界をオーバーフローしないように厳密な制約を適用するようにブラウザーに指示します。

サンプル コード:

.container {
  contain: strict;
  width: 200px;
  height: 200px;
  border: 1px solid black;
  overflow: hidden;
}

.text {
  width: 300px;
  height: 300px;
  background-color: red;
}

上記のコードでは、コンテナ div の幅と高さは 200 ピクセルのままで、overflow:hidden が設定されています。ただし、contain 属性値が strict に設定されているため、ブラウザはテキスト div のサイズを自動的に調整して、テキスト div がコンテナの境界からはみ出さないようにします。

3. content: この値は、子要素のサイズと位置に関係なく、要素自体のコンテンツのみを考慮するようにブラウザーに指示します。

サンプル コード:

.container {
  contain: content;
  width: 200px;
  height: 200px;
  border: 1px solid black;
  overflow: hidden;
}

.text {
  width: 300px;
  height: 300px;
  background-color: red;
}

上記のコードでは、コンテナ div の幅と高さは 200 ピクセルのままで、overflow:hidden が設定されています。ただし、contain 属性値が content に設定されているため、ブラウザーは要素自体のサイズのみを考慮し、子要素のサイズを調整しないため、テキスト div は依然としてコンテナーの外にオーバーフローします。

4. size: この値は、要素のサイズをコンテンツに合わせた最小サイズに変更する必要があることをブラウザーに指示します。

サンプル コード:

.container {
  contain: size;
  width: 200px;
  height: 200px;
  border: 1px solid black;
  overflow: hidden;
}

.text {
  width: 300px;
  height: 300px;
  background-color: red;
}

上記のコードでは、コンテナ div の幅と高さは 200 ピクセルのままで、overflow:hidden が設定されています。ただし、contain 属性値が size に設定されているため、ブラウザーはコンテナーのサイズに適合するようにテキスト div のサイズを変更します。

概要

CSS の contains 属性の役割は、要素のコンテンツのレイアウト方法と、要素と他の要素との関係を制御することです。 contains 属性を使用すると、より正確なレイアウトとより優れたレンダリング効果を実現できます。値に応じて、オーバーフロー、サイズ変更、子要素の効果を制御できます。 contains 属性を理解し、上手に使用すると、Web ページのレイアウトをより適切に制御し、最適化するのに役立ちます。

以上がCSS の contains 属性の役割と構文の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。