The content-visibility property controls whether an element renders its contents, enabling significant performance improvements. Here's how to use it.
Basic Usage
Loading code block...
Long Page Optimization
Loading code block...
contain-intrinsic-size
Loading code block...
Hidden vs display:none
Loading code block...
Lazy Rendering Pattern
Loading code block...
Dashboard Widgets
Loading code block...
Combining with Containment
Loading code block...
Accordion Pattern
Loading code block...
Modal and Dialog
Loading code block...
Table Optimization
Loading code block...
Animation Considerations
Loading code block...
JavaScript Integration
Loading code block...
Performance Measurement
Loading code block...
Best Practices
Usage:
✓ Use for off-screen content
✓ Set contain-intrinsic-size
✓ Use 'auto' for most cases
✓ Apply to repeated elements
Performance:
✓ Reduces initial render time
✓ Skips off-screen layout
✓ Improves scroll performance
✓ Preserves element state
Intrinsic Size:
✓ Estimate accurately
✓ Use 'auto' prefix when possible
✓ Match typical content size
✓ Update if content varies
Avoid:
✗ On visible above-fold content
✗ On animated elements
✗ Without intrinsic size
✗ Causing layout shifts
Conclusion
The content-visibility property significantly improves rendering performance by skipping off-screen content. Use it for long pages, lists, and hidden UI elements. Always set contain-intrinsic-size to prevent layout shifts. The 'auto' value lets the browser optimize automatically based on visibility.