CSS の contains 属性の構文は何ですか?

CSS の contains 属性は、要素に他の要素を含めるか、その中に含めるかを指定するために使用されます。 contains 属性を設定すると、どの要素を個別に処理する必要があるかをブラウザーに指示できるため、ページのレンダリング パフォーマンスが向上します。

contain 属性の構文は次のとおりです。

contain: layout [paint] [size] [style]

• layout: 要素を他の要素から独立してレイアウトするかどうかを示します。オプションの値は、none、strict、および content です。

  • none: 要素が他の要素のレイアウトに影響を与えず、他の要素の影響も受けないことを示します。
  • strict: 要素が他の要素のレイアウトに影響を与えるが、他の要素の影響を受けないことを示します。
  • content: 要素が直接の親要素によってのみ影響を受け、他の要素には影響しないことを示します。

• paint: 要素を他の要素とは独立して描画するかどうかを示します。オプションの値は、none および contents です。

  • none: 要素自体は描画されず、視覚効果も生成されないことを示します。
  • contents: 要素が描画され、視覚効果が生成されることを示します。

• #size: 要素のサイズを他の要素とは独立して設定する必要があるかどうかを示します。オプションの値は、none、content、および strict です。

  • none: 要素のサイズ計算がその内部コンテンツに依存しないことを示します。
  • content: 要素のサイズ計算がその内部コンテンツのサイズに依存することを示します。
  • strict: 要素のサイズ計算は直接の子要素のサイズのみに依存し、内部コンテンツとは関係がないことを示します。

• #style: 要素のスタイルを他の要素とは独立して計算する必要があるかどうかを示します。オプションの値は、none および contents です。

  • none: 要素のスタイル計算がその内部コンテンツと子要素に依存しないことを示します。
  • contents: 要素のスタイル計算がその内部コンテンツと子要素に依存することを示します。

具体的なコード例をいくつか示します:

/* 设置元素在布局上独立于其他元素 */
.container {
  contain: layout;
}

/* 设置元素在绘制上独立于其他元素 */
.box {
  contain: paint;
}

/* 设置元素在尺寸计算上独立于其他元素 */
.img-container {
  contain: size;
}

/* 设置元素在样式计算上独立于其他元素 */
.card {
  contain: style;
}

上の例では、.container クラスは要素を次のように設定します。他の要素から独立 .box クラスのレイアウトは、他の要素から独立して要素の描画を設定し、.img-container クラスは、他の要素から独立して要素のサイズ計算を設定します。 .cardクラスは、他の要素とは独立して要素のスタイル計算を設定します。

contain 属性を使用すると、ページ レンダリングのパフォーマンスを最適化し、不必要なリフローおよび再描画操作を減らし、ユーザー エクスペリエンスを向上させることができます。

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