Intermediate LevelCSS & Modern Layouts
How does content-visibility improve rendering performance for long pages?
❓ Interview Prompt: Explain content-visibility: auto for skipping off-screen rendering and contain-intrinsic-size.
content-visibility: auto tells the browser to skip rendering (layout, paint, style) for elements that are off-screen, dramatically improving initial page load performance:
How It Works:
1
Browser only renders visible viewport content.
2
Off-screen sections are skipped entirely during layout.
3
As the user scrolls, the browser renders sections just-in-time.
contain-intrinsic-size:
Provides estimated dimensions for skipped elements so scrollbar height remains accurate: contain-intrinsic-size: 0 500px (0 width auto-sized, 500px estimated height).
Code Implementation Example
css
/* Skip rendering off-screen sections */
.faq-section {
content-visibility: auto;
contain-intrinsic-size: 0 600px; /* Estimated height for scrollbar */
}
/* Long article pages */
article > section {
content-visibility: auto;
contain-intrinsic-size: auto 400px;
}💡content-visibility skipping off-screen FAQ sections during rendering.
🎯 Interview Key Takeaway
content-visibility: auto can improve initial render time by 50%+ on long pages by skipping off-screen layout.
#content-visibility#Performance#Rendering#Intermediate
Back to all CSS & Modern Layouts Questions→