Horje
CSS content-visibility Property

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

 


Reffered: https://www.geeksforgeeks.org

CSS

Related
Pure CSS Landing Page Layout Pure CSS Landing Page Layout
Printing the table on the web page having type effect repeatedly Printing the table on the web page having type effect repeatedly
How to tell the browser in CSS to render your layout in different box models? How to tell the browser in CSS to render your layout in different box models?
How to rotate shape loader animation using CSS ? How to rotate shape loader animation using CSS ?
Create Effect of Particle Animation using CSS Create Effect of Particle Animation using CSS

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 11



 

Horje