要素の影響範囲を制限し、ブラウザの最適化を助けるプロパティです。layout、paint、size、styleなどの値で、要素が外部に与える影響を制限します。大規模なアプリケーションのパフォーマンス改善に有効です。
contain: none | strict | content | size | layout | style | paint任意値: [contain:layout_paint]
専用ユーティリティは無く任意値で書く。コンテナクエリ用途なら @container（container-typeの項）。
.widget {
contain: layout style paint;
}ウィジェットの影響を局所化
.card {
contain: layout;
}レイアウトの影響を制限
大量の要素がある場合のパフォーマンス向上に効果的。
containは「この要素の内部は外に影響しない」とブラウザに約束してレンダリングを分離する上級プロパティです。AIはcontent-visibilityとの関係（後者はcontainを内包する遅延描画）を混同しがちです。誤った値（strictなど）を広く付けるとレイアウトが実際に壊れる（サイズが0になる等）ため、効果測定なしの多用は危険です。
長いリストのレンダリング負荷を下げたい。containとcontent-visibilityのどちらが適切か判断して適用して
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。