CssConceptBeginner · 4 min read

What is content-visibility in CSS: Explanation and Examples

The content-visibility CSS property controls whether an element's content is rendered and affects layout and painting. It helps improve page performance by skipping rendering of off-screen or hidden content until needed.

⚙️

How It Works

The content-visibility property acts like a gatekeeper for the browser. When set, it tells the browser to skip rendering and layout calculations for an element's content until that content is needed, such as when it scrolls into view.

Think of it like a book with pages sealed shut. You don’t open or read the pages until you actually need to, saving time and effort. Similarly, the browser avoids processing hidden or off-screen parts of a page, which speeds up loading and scrolling.

This property can also create a new formatting context, isolating the element’s layout from the rest of the page, which helps with performance and prevents layout shifts.

💻

Example

This example shows a long list where only visible items are rendered. The rest are skipped until scrolled into view, improving performance.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>content-visibility Example</title>
<style>
  .container {
    height: 150px;
    overflow-y: scroll;
    border: 2px solid #333;
  }
  .item {
    height: 50px;
    margin: 5px;
    background-color: #a0c4ff;
    content-visibility: auto;
    contain-intrinsic-size: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    border-radius: 4px;
  }
</style>
</head>
<body>
  <div class="container" aria-label="Scrollable list">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
    <div class="item">Item 6</div>
    <div class="item">Item 7</div>
    <div class="item">Item 8</div>
    <div class="item">Item 9</div>
    <div class="item">Item 10</div>
  </div>
</body>
</html>

Output

A scrollable box with 10 blue items stacked vertically, each labeled Item 1 to Item 10. Only visible items are rendered initially, improving performance.

🎯

When to Use

Use content-visibility when you have large or complex content that is off-screen or hidden initially, like long lists, tabs, or expandable sections. It helps speed up page load and smooth scrolling by delaying work until content is needed.

For example, on a news site with many articles, you can apply it to article previews below the fold so the browser skips rendering them until the user scrolls down.

It is especially useful on mobile devices where performance and battery life matter.

✅

Key Points

content-visibility: auto; lets the browser skip rendering off-screen content.
Improves page speed and reduces layout work.
Creates a new formatting context to isolate layout.
Works well for large, scrollable, or hidden content.
Use contain-intrinsic-size to reserve space and avoid layout jumps.

✅

Key Takeaways

content-visibility improves performance by skipping rendering of off-screen content.

Use content-visibility: auto; on large or hidden elements to speed up page load.

Always set contain-intrinsic-size to reserve space and prevent layout shifts.

It creates a new formatting context, isolating the element’s layout from the rest of the page.

Ideal for long lists, tabs, expandable sections, and content below the fold.