# content-visibility

> Applies `content-visibility` so the browser skips rendering work for an element's contents; defaults to `"auto"`.

```ts
import { contentVisibility } from "@sdxc/u/layout";
```

Applies `content-visibility` so the browser skips rendering work for an
element's contents; defaults to `"auto"`. Long scrollable lists want
virtualize, which also reserves a placeholder size for the scrollbar.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.contentVisibility()` | `css({ contentVisibility: "auto" })` |
| `u.contentVisibility("hidden")` | `css({ contentVisibility: "hidden" })` |
| `u.contentVisibility("visible")` | `css({ contentVisibility: "visible" })` |

## Examples

### Basic example

Use `contentVisibility()` on sections of a long page so the browser skips their rendering work until they scroll near the viewport. Scroll the list:

```tsx
<div mix={[overflowY("auto"), bs(64), ...]}>
	<section mix={[contentVisibility(), ...]}>Chapter 1: Layout</section>
	<section mix={[contentVisibility(), ...]}>Chapter 2: Size</section>
	<section mix={[contentVisibility(), ...]}>Chapter 3: Color</section>
	<section mix={[contentVisibility(), ...]}>Chapter 4: Typography</section>
	<section mix={[contentVisibility(), ...]}>Chapter 5: Effects</section>
	<section mix={[contentVisibility(), ...]}>Chapter 6: Overflow</section>
	<section mix={[contentVisibility(), ...]}>Chapter 7: State</section>
</div>
```

### Hiding contents

Use `contentVisibility("hidden")` to skip rendering an element's contents while keeping its own box, and `"visible"` to render them as usual:

```tsx
<div mix={[...]}>
	<div mix={[...]}>
		<div mix={[contentVisibility("visible"), is(48), ...]}>Rendered contents</div>
		<span mix={[...]}>contentVisibility("visible")</span>
	</div>
	<div mix={[...]}>
		<div mix={[contentVisibility("hidden"), is(48), ...]}>Rendered contents</div>
		<span mix={[...]}>contentVisibility("hidden")</span>
	</div>
</div>
```

## Applying on a state

Wrap the call in a state utility to scope it to one selector.

```ts
u.hover(u.contentVisibility())
```

## Responsive design

Wrap the call in a container query to scope it to one width.

```ts
u.at("md", u.contentVisibility())
```

## Signature

```ts
u.contentVisibility(value?: ContentVisibilityValue)
```