CSS content-visibility Property
Last Updated :
30 Jan, 2023
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
Share your thoughts in the comments
Please Login to comment...