# content-visibility

> 要素のレンダリングを制御し、画面外の要素の処理をスキップしてパフォーマンスを向上させるプロパティです。

- カテゴリ: インタラクション・UX
- URL: https://www.css-dictionary.com/property/content-visibility/

## 構文

```css
content-visibility: visible | hidden | auto
```

## Tailwindでは

- 任意値: `[content-visibility:auto]`
- 補足: 専用ユーティリティは無く任意値で書く。

## ブラウザ対応

- Baseline 新しく利用可能（2024年9月に全主要ブラウザ対応）
- Chrome 85+ / Firefox 125+ / Safari 18+ / Edge 85+

## コード例

### 例1: 長い記事の仮想スクロール最適化

```css
.article {
  content-visibility: auto;
  contain-intrinsic-size: 1000px;
}
```

### 例2: 画面外要素のレンダリングをスキップ

```css
.off-screen {
  content-visibility: hidden;
}
```

## TIPS

長いページや大量のコンテンツでスクロールパフォーマンスが大幅に向上。

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

content-visibility: autoには contain-intrinsic-size の併用がほぼ必須です（未描画部分の想定サイズを与えないとスクロールバーが暴れる）。AIはこの相棒を省略しがちです。またAIの知識では「Chrome限定の実験的機能」と古いことがありますが、現在は全ブラウザ対応（Baseline）です。

## AIへの依頼文例

- 長いページの初期描画を速くしたい。content-visibility: autoとcontain-intrinsic-sizeのセットで、スクロールバーが暴れないように実装して

## 関連プロパティ

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