# CSS Content Visibility

The `content-visibility` property controls whether or not an element renders its contents at all, along with forcing a strong set of containments. This allows the browser to skip the layout and painting work for elements that are not currently on-screen (off-screen), significantly improving initial load performance.

## 1. The Concept

Traditionally, the browser renders the entire DOM tree, even parts that are far below the fold. With `content-visibility: auto`, the browser treats off-screen content as if it has `visibility: hidden` (but better), skipping rendering work until the user scrolls near it.

## 2. Values

*   **`visible`** (Default): No effect. The element renders normally.
*   **`hidden`**: The element skips its contents. The skipped content is not accessible to browser features like find-in-page, tab-order navigation, etc.
*   **`auto`**: The element turns on layout containment, style containment, and paint containment. If the element is off-screen, it also turns on size containment and skips painting its contents.

## 3. Basic Usage

```css
.section {
  content-visibility: auto;
  contain-intrinsic-size: 1000px; /* Important! */
}
```

## 4. `contain-intrinsic-size`

When `content-visibility: auto` skips rendering, the element effectively has a height of 0. This causes scrollbars to jump around as you scroll down and content "pops" into existence.

To prevent this layout shift, you must provide an estimated size using `contain-intrinsic-size`.

```css
/* Estimate the height of the section */
.card {
  content-visibility: auto;
  contain-intrinsic-size: 500px;
}
```

You can also specify width and height separately:
```css
contain-intrinsic-size: 300px 500px; /* width height */
```

Or use `auto` to remember the last rendered size:
```css
contain-intrinsic-size: auto 500px;
```

## 5. Accessibility

Unlike `display: none` or `visibility: hidden`, content hidden by `content-visibility: auto` remains in the DOM and is accessible to the accessibility tree (AOM) and find-in-page features in modern browsers. When a user searches for text inside a skipped element, the browser automatically renders it and scrolls to it.

## 6. Browser Support

*   **Chrome/Edge:** Supported.
*   **Firefox:** Supported.
*   **Safari:** Supported (v18+).

It is safe to use as a progressive enhancement. Browsers that don't support it will simply ignore it and render normally.

[[programming/css/css]]
[[programming/javascript/vanilla/performance-api]]
[[programming/javascript/vanilla/intersection-observer]]