HTML & CSS Interview Question #131

What is content-visibility in CSS?

Advanced CSS, Accessibility, Performance, Debugging & Senior Scenarios Senior Advanced

Quick Interview Answer

content-visibility allows the browser to skip some rendering work for content that is not currently relevant to the viewport. content-visibility: auto can improve rendering performance on long pages by deferring layout and paint work for off-screen sections.

Detailed Explanation

content-visibility allows the browser to skip some rendering work for content that is not currently relevant to the viewport. content-visibility: auto can improve rendering performance on long pages by deferring layout and paint work for off-screen sections.

Because skipped content still affects page structure in important ways, intrinsic-size hints can help reduce scrollbar or layout changes. The feature should be measured in the real application rather than added everywhere automatically.

Code Example

.long-page-section {
    content-visibility: auto;
    contain-intrinsic-size: auto 500px;
}