# contain

> 要素の影響範囲を制限し、ブラウザの最適化を助けるプロパティです。layout、paint、size、styleなどの値で、要素が外部に与える影響を制限します。大規模なアプリケーションのパフォーマンス改善に有効です。

- カテゴリ: その他
- URL: https://www.css-dictionary.com/property/contain/

## 構文

```css
contain: none | strict | content | size | layout | style | paint
```

## Tailwindでは

- 任意値: `[contain:layout_paint]`
- 補足: 専用ユーティリティは無く任意値で書く。コンテナクエリ用途なら @container（container-typeの項）。

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 52+ / Firefox 69+ / Safari 15.4+ / Edge 79+

## コード例

### 例1: ウィジェットの影響を局所化

```css
.widget {
  contain: layout style paint;
}
```

### 例2: レイアウトの影響を制限

```css
.card {
  contain: layout;
}
```

## TIPS

大量の要素がある場合のパフォーマンス向上に効果的。

## AIがよく間違えるポイント

containは「この要素の内部は外に影響しない」とブラウザに約束してレンダリングを分離する上級プロパティです。AIはcontent-visibilityとの関係（後者はcontainを内包する遅延描画）を混同しがちです。誤った値（strictなど）を広く付けるとレイアウトが実際に壊れる（サイズが0になる等）ため、効果測定なしの多用は危険です。

## AIへの依頼文例

- 長いリストのレンダリング負荷を下げたい。containとcontent-visibilityのどちらが適切か判断して適用して

## 関連プロパティ

- [will-change](https://www.css-dictionary.com/property/will-change.md)