Open In App

CSS content-visibility Property

Improve
Improve
Like Article
Like
Save
Share
Report

The content-visibility CSS property is used to set whether the element will be rendering its contents or not, forcing a solid set of containments, and allowing user agents to potentially omit a large layout and rendering work until it becomes needed.

Syntax:

/* Keyword values */
content-visibility: visible|hidden|auto;

/* Global values */
content-visibility: inherit| initial| revert| revert-layer| unset;

Property Values:

  • visible: No effect. The element’s content is presented and rendered as usual.
  • hidden: It omits some of its information. The skipped contents cannot be accessed by user-agent features like find-in-page, tab-order navigation, etc., or by selectable or focusable user interface elements. Giving the contents display: This is the best available.
  • auto: The element activates layout containment, style containment, and paint containment. If the user doesn’t find the element’s contents relevant, it also skips over them.

Example 1: This example describes how the content-visibility property works.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <style>
        .content1 {
                      content-visibility: visible; 
                      border: 2px solid black;
        }
        .content2 {
                      content-visibility: hidden; 
                      border: 2px solid black;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green;">GeeksforGeeks</h1>
    <h2>CSS content-visibility Property</h2>
    <p class="content1">Content 1</p>
    <p class="content2">Content 2</p>
</body>
  
</html>


Output:

Example 2: This example describes how the content-visibility property works using global values.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <style>
        .content1 {
                      content-visibility: inherit; 
                      border: 2px solid black;
        }
        .content2 {
                      content-visibility: initial; 
                      border: 2px solid black;
        }
        .content3 {
                      content-visibility: hidden; 
                      border: 2px solid black;
        }
        .content4 {
                      content-visibility: auto; 
                      border: 2px solid black;
        }
        .content5 {
                      content-visibility: visible; 
                      border: 2px solid black;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green;">GeeksforGeeks</h1>
    <h2>CSS content-visibility Property</h2>
    <p class="content1">Content 1</p>
    <p class="content2">Content 2</p>
    <p class="content3">
        Content 3
        <span class="content4">Content 4</span>
        <span class="content5">Content 5</span>
    </p>
  
</body>
  
</html>


Output:

Supported Browsers: The browsers supported by CSS | content-visibility property is listed below:

  • Google Chrome 13
  • Edge 79
  • Opera 44.0
  • Firefox


Last Updated : 30 Jan, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads