[ @sdxc/u/layout ]
content-visibility
Applies content-visibility so the browser skips rendering work for an element's contents; defaults to "auto".
import { contentVisibility } from "@sdxc/u/layout";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:
<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:
Rendered contents
contentVisibility("visible")Rendered contents
contentVisibility("hidden")<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.
u.hover(u.contentVisibility())Responsive design
Wrap the call in a container query to scope it to one width.
u.at("md", u.contentVisibility())Signature
u.contentVisibility(value?: ContentVisibilityValue)