CSS の新機能には、コントロールページの再描画と再配置の問題が含まれています

新しい CSS プロパティ contain を紹介する前に、読者はページの再描画と再配置が何であるかを理解する必要があります。

これについては以前にも何度も説明しました。CSSアニメーションのパフォーマンスを向上させる正しいアプローチ[1]を参照してください。

さて、この記事の本題に入りましょう。

なぜ含まれているのですか?

contain プロパティを使用すると、特定の DOM 要素とその子要素を指定して、それらを DOM ツリー構造全体から独立させることができます。目的は、ブラウザが毎回ページ全体ではなく、一部の要素のみを再描画および再配置できるようにすることです。

containプロパティを使用すると、作成者は要素とそのコンテンツがドキュメントツリーの残りの部分から可能な限り独立していることを示すことができます。これにより、ブラウザはページ全体ではなく、DOMの特定の領域に対してレイアウト、スタイル、ペイント、サイズ、またはそれらの組み合わせを再計算できます。contain構文

構文を見てみましょう:

{ 
  /* レイアウトの包含はありません。 */ 
  含む: なし; 
  /* レイアウト、スタイル、ペイント、サイズの包含をオンにします。 */ 
  含む: 厳密; 
  /* レイアウト、スタイル、ペイントの包含をオンにします。 */ 
  含む: コンテンツ; 
  /* 要素のサイズ制限をオンにします。 */ 
  内容: サイズ; 
  /* 要素のレイアウト包含をオンにします。 */ 
  含む: レイアウト; 
  /* 要素のスタイル包含をオンにします。 */ 
  含む: スタイル; 
  /* 要素のペイント包含をオンにします。 */ 
  含有物: 塗料; 
}

none を除くと、他に 6 つの値が可能です。1 つずつ見ていきましょう。

内容: サイズ

contain: size: contain: size が設定された要素のレンダリングは、その子要素の内容の影響を受けません。

この値は、要素のサイズ制限をオンにします。これにより、子孫を調べなくても、包含ボックスをレイアウトできるようになります。

私もこの定義を初めて見たとき、戸惑いました。定義だけを見ても、何を意味しているのか理解するのは困難でした。まだ練習が必要です:

次のような単純な構造があると仮定します。

<div class="コンテナ"> 
    
</div>

。容器 { 
    幅: 300ピクセル; 
    パディング: 10px; 
    境界線: 1px 実線の赤; 
} 
 
ｐ { 
    境界線: 1px 実線 #333; 
    マージン: 5px; 
    フォントサイズ: 14px; 
}

また、jQuery の助けを借りて、クリックされるたびに <p>Coco</p> 構造がコンテナーに追加されます。

$('.container').on('click', e => { 
    $('.container').append('<p>ココ</p>') 
})

すると、次の結果が得られます。

ご覧のとおり、要素の数が増えるとコンテナの高さも増加しますが、これは正常です。

この時点で、コンテナー .container に contain: size を追加すると、上記のステートメントが表示されます。contain: size が設定された要素のレンダリングは、その子要素の内容によって影響を受けません。

。容器 { 
    幅: 300ピクセル; 
    パディング: 10px; 
    境界線: 1px 実線の赤; 
+ 含む: サイズ 
}

そして何が起こるか見てみましょう:

通常、子要素の増加により親要素の高さは伸びます。しかし、子要素の変更は親要素のスタイルレイアウトに影響を与えなくなりました。これが contain: size の役割です。

含む: スタイル

次に、contain: style、contain: layout、contain: paint について説明します。まず、contain: スタイルを見てみましょう。

この記事の執筆時点では、contain: スタイルは削除されています。

CSS Containment Module レベル 1[2]: リスクのある「スタイル包含」機能をこの仕様から削除し、レベル 2 に移動します。

まあ、公式の説明では、特定のリスクがあるため一時的に削除されているということです。仕様の第 2 バージョンで再定義される可能性があるため、当面この属性は保留されます。

内容: 塗料

contain: paint: contain: paint を持つ要素はレイアウト制約を設定します。つまり、ユーザー エージェントには、この要素の子要素はこの要素の境界外には表示されないことが通知されます。したがって、要素が画面上にない場合、または非表示に設定されている場合、その子孫も非表示になり、レンダリングされないことが保証されます。

この値は、要素のペイント コンテインメントをオンにします。これにより、包含ボックスの子孫が境界外に表示されないことが保証されます。そのため、要素が画面外にあるか、その他の理由で表示されていない場合は、その子孫も表示されないことが保証されます。

これは少し理解しやすいので、最初の機能を見てみましょう。

contain: paint が設定された要素の子要素は、この要素の境界外には表示されません。 contain: paint が設定された要素の子要素は、この要素の境界外には表示されません。

この機能は、overflow: hidden に多少似ており、子要素の内容が要素の境界を超えないことをユーザーエージェントに明示的に伝え、余分な部分をレンダリングする必要がないようにします。

簡単な例ですが、要素構造は次のようになります。

<div class="コンテナ"> 
    <p>ココ</p> 
</div>

。容器 { 
    含有物: 塗料; 
    境界線: 1px 実線の赤; 
} 
 
p{ 
    左: -100px; 
}

contain: paint が設定されている場合と設定されていない場合に何が起こるかを見てみましょう。

CodePenデモ -- contain: paintデモ[3]

contain: paint セットを持つ要素は、画面外にある場合はレンダリングされません。

contain: paint を使用すると、ユーザー エージェントは画面外にあるレンダリング要素を無視し、他のコンテンツをより速くレンダリングできるようになります。

含む: レイアウト

contain: layout: contain: layout を持つ要素はレイアウト制約を設定します。つまり、この要素内のスタイルの変更によって要素外のスタイルが変更されることはなく、その逆も同様であることがユーザーエージェントに通知されます。

この値は、要素のレイアウト包含をオンにします。これにより、包含ボックスがレイアウトの目的で完全に不透明になり、外部のものが内部レイアウトに影響を与えることがなくなり、その逆も同様になります。

contain: レイアウトを有効にすると、ドキュメント全体を再レンダリングするのではなく、各フレームでレンダリングする必要がある要素の数をほんの数個に減らすことができるため、ブラウザの不要な作業が大幅に削減され、パフォーマンスが大幅に向上します。

contain:layout を使用すると、開発者は、その要素の子孫に対する変更が外部の要素のレイアウトに影響を与えないこと、およびその逆であることを指定できます。

したがって、ブラウザは、内部要素が変更された場合のみその位置を計算し、DOM の残りの部分は変更されません。つまり、フレーム レンダリング パイプラインのレイアウト プロセスが高速化されることになります。

問題

説明文は美しいですが、実際のデモテスト（2021/04/27時点、Chrome 90.0.4430.85）では、contain:layoutのみを使用した場合、上記のような美しい結果は確認できませんでした。

contain: layout が設定された特定の要素の場合、この要素の子孫に対する変更は、外部要素のレイアウトに影響します。赤いボックスをクリックすると、コンテナーに <p>Coco<p> 要素が追加されます。

簡単なコードは次のとおりです。

<div class="コンテナ"> 
    <p>ココ</p> 
    ... 
</div> 
<div class="g-test"></div>

html, 
体 { 
    幅: 100%; 
    高さ: 100%; 
    ディスプレイ: フレックス; 
    コンテンツの中央揃え: 中央; 
    アイテムの位置を中央揃えにします。 
    flex-direction: 列; 
    ギャップ: 10px; 
} 
 
。容器 { 
    幅: 150ピクセル; 
    パディング: 10px; 
    含む: レイアウト; 
    境界線: 1px 実線の赤; 
} 
 
.g-テスト{ 
    幅: 150ピクセル; 
    高さ: 150px; 
    境界線: 1px 緑; 
}

CodePenデモ -- contain: レイアウトデモ[4]

使用できますか -- CSS Contain

2021-04-27現在、Can i Use の CSS Contain 互換性はすでに利用可能です:

参考文献

CSSコンテインメントモジュールレベル1[5]

CSSの包含[6]

Chrome 52のCSSコンテインメント[7]

参考文献

[1] CSSアニメーションのパフォーマンスを向上させるための正しいアプローチ：

https://github.com/chokcoco/iCSS/issues/11

[2]CSSコンテインメントモジュールレベル1：

https://www.w3.org/TR/css-contain-1/

[3] CodePenデモ -- contain: paint デモ:

https://codepen.io/Chokcoco/pen/KKwmgmN

[4]CodePenデモ - contain: レイアウトデモ:

https://codepen.io/Chokcoco/pen/rNjRELL

[5]CSSコンテインメントモジュールレベル1：

https://www.w3.org/TR/css-contain-1/

[6]CSSの包含:

https://justmarkup.com/articles/2016-04-05-css-containment/

[7]Chrome 52のCSSコンテインメント:

https://developers.google.com/web/updates/2016/06/css-containment

[8] Github -- iCSS:

https://github.com/chokcoco/iCSS

これで、ページの再描画と再配置を制御する新しい CSS 機能に関するこの記事は終了です。ページの再描画と再配置を制御する CSS に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。