content-visibility, contain

content-visibility

content-visibilityは、2020年8月にChrome 85に追加されたCSS属性です.
スクリーン外コンテンツのレンダリングを無視することで、初期ロード時間を向上させます.
ユーザエージェントは、レイアウト、ペイントなどの要素のレンダリング操作を省略できます.また、画面内のコンテンツとより迅速に対話することもできます.

/* Keyword values */
content-visibility: visible;
content-visibility: hidden;
content-visibility: auto;

/* Global values */
content-visibility: initial;
content-visibility: unset;

visible(初期値)
あまり効果がありません.要素の内容は正常に配置され、レンダリングされます.
hidden
要素の内容をスキップします.スキップされたコンテンツは、ユーザーエージェント機能にアクセスできず、選択またはフォーカスできません.
auto
要素には、レイアウト、スタイルが含まれます.要素がユーザーに関係ない場合は、その内容はスキップされます.hiddenとは異なり、ユーザーエージェント機能はスキップされたコンテンツを正常に使用できます.
*アクセス性の問題
タイトルやその他のコンテンツが画面から離れている場合、スクリーンリーダーはページ全体の概要を読むことができません.

contain

Content-visibilityはCSSコンテンツ仕様に依存します.CSSコンテンツの核心と目的は、ページ全体にわたってDOMサブツリーの分離を提供することによってレンダリング性能を向上させることである.
CSSコンテンツには4つのタイプがあり、各タイプはcontain属性の潜在値であり、スペースでグループを区切ることができます.

contain: layout;
contain: paint;
contain: size;
contain: style;

layout
conatin要素レイアウトからの分離を設定します.
レイアウトは通常、ドキュメント全体に範囲を指定しますが、このプロパティ値を使用すると、ブラウザに要素をチェックするだけであることを伝えることができます.要素内のすべての項目は、ページの残りの部分に影響を与えずに要素として指定されます.
paint
conatinエレメントペイントの分離を設定します.
基本的には、主な箱のダウンジャケットの境界を箱に埋めます.言葉にあふれる.
size
contains要素のsize分離を設定します.要素のサイズは、サブ要素が存在しないように計算されます.この属性値を適用する場合は、その属性を適用する要素のサイズも指定する必要があります.サイズを手動で指定しない場合、ほとんどの場合0になります.
style
contains要素とstyleの分離を設定します.contain要素とサブ要素に影響を及ぼす可能性のあるプロパティでは、containを超える効果はありません.
ソース
https://wit.nts-corp.com/2020/09/11/6223?fbclid=IwAR0asl542KhCGImYD5Ct6wojjwQdDR5ZpBKDJ_0jyz4ke9M4Ax6_FzzWlsI
https://developer.mozilla.org/en-US/docs/Web/CSS/content-visibility
https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Containment
https://wit.nts-corp.com/2019/07/08/5594