Content Visibility

Optimize rendering by skipping off-screen content

Syntax

visual="content-visibility:[value]"

Values

Value	CSS Output	Description
visible	content-visibility: visible	Render all content
auto	content-visibility: auto	Skip when off-screen
hidden	content-visibility: hidden	Never render off-screen

Examples

<section visual="content-visibility:auto">Large list</section>
<div visual="content-visibility:hidden">Hidden until needed</div>

Preview

Content Visibility

visual="content-visibility:auto" - Performance optimization for off-screen content

visible

auto

hidden

View Code

<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
   <div space="p:small" visual="bg:primary text:white rounded:small">visible</div>
   <div space="p:small" visual="bg:primary text:white rounded:small">auto</div>
   <div space="p:small" visual="bg:primary text:white rounded:small">hidden</div>
 </div>