CSS に含まれる構文の使用シナリオ

CSS での contains の構文使用シナリオ

CSS では、contain は、要素のコンテンツが外部のスタイルやレイアウトから独立しているかどうかを指定するために使用される便利な属性です。 。これは、開発者がページ レイアウトをより適切に制御し、パフォーマンスを最適化するのに役立ちます。この記事では、contain 属性の構文使用シナリオを紹介し、具体的なコード例を示します。

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

contain: layout|paint|size|style|'none'|'strict'|'content';

1. layout: 要素のレイアウトが他の要素から独立しているかどうかを指定します。レイアウトに設定すると、レイアウトのパフォーマンスを向上させることができます。 contains 属性を使用してレイアウトの独立性を実現するサンプル コードは次のとおりです。

<style>
    .container {
        contain: layout;
    }
    .box {
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>
<div class="container">
    <div class="box"></div>
</div>

2. paint: 要素が他の要素から独立して描画されるかどうかを指定します。ペイントに設定すると描画パフォーマンスを向上させることができます。 contains 属性を使用して描画の独立性を実現するサンプル コードは次のとおりです。

<style>
    .container {
        contain: paint;
    }
    .box {
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>
<div class="container">
    <div class="box"></div>
</div>

3. size: 要素のサイズが他の要素から独立しているかどうかを指定します。 size に設定すると、サイズ計算のパフォーマンスを向上させることができます。 contains 属性を使用してサイズの独立性を実現するサンプル コードは次のとおりです。

<style>
    .container {
        contain: size;
    }
    .box {
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>
<div class="container">
    <div class="box"></div>
</div>

4. style: 要素のスタイルが他の要素から独立しているかどうかを指定します。 style に設定すると、スタイルの計算パフォーマンスを向上させることができます。 contains 属性を使用してスタイルの独立性を実現するサンプル コードは次のとおりです。

<style>
    .container {
        contain: style;
    }
    .box {
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>
<div class="container">
    <div class="box"></div>
</div>

5. none: contains 属性が適用されないことを示します。 none を使用したサンプル コードは次のとおりです。

<style>
    .container {
        contain: none;
    }
    .box {
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>
<div class="container">
    <div class="box"></div>
</div>

6. strict: すべての contains 関数が適用されることを示します。 strict を使用するサンプル コードは次のとおりです。

<style>
    .container {
        contain: strict;
    }
    .box {
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>
<div class="container">
    <div class="box"></div>
</div>

7. content: 要素のコンテンツが他の要素から独立しているかどうかを指定します。コンテンツに設定すると、コンテンツのレンダリングのパフォーマンスを向上させることができます。 contains 属性を使用してコンテンツの独立性を実現するサンプル コードは次のとおりです。

<style>
    .container {
        contain: content;
    }
    .box {
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>
<div class="container">
    <div class="box"></div>
</div>

要約すると、CSS での contains 属性の使用シナリオは、レイアウト、描画、サイズ、スタイル、内容。 contains 属性を設定すると、特定の側面において要素を他の要素から独立させることができるため、ページのパフォーマンスと効率が向上します。

以上がCSS に含まれる構文の使用シナリオの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。