CSS content-visibility Property
CSS content-visibility property is used to set the content visibility of an element in CSS. It controls if an element renders its contents at all, along with forcing a set of containments, and allows user agents to potentially omit large swathes of layout and rendering work unless it becomes required.
Syntax of content-visibility Property
Following is the syntax for the content-visibility property.
content-visibility: visible | hidden | auto |initial;
Example: CSS content-visibility property
In the example below, we are using the content-visibility property with different background colors, borders, and different values.
<!DOCTYPE html>
<html>
<head>
<title>The content-visibility property in CSS</title>
<style type="text/css">
div{
content-visibility: hidden;
color: green;
padding: 8px;
content-visibility: hidden;
}
.hidden {
content-visibility: hidden;
contain-intrinsic-size: 0 500px;
}
.visible {
content-visibility: visible;
contain: style layout paint;
}
</style>
</head>
<body>
<div class="hidden">Study Tonight</div>
<div class="visible">is the best platform to learn digital</div>
</body>
</html>
Output:
Example 2: CSS content-visibility property
In the example below, we are using the content-visibility property with different background colors, borders, and different values. We have given the content-visibility of the object as a initial.
<!DOCTYPE html>
<html>
<head>
<title>The content-visibility property in CSS</title>
<style type="text/css">
<style>
section {
content-visibility: initial;
contain-intrinsic-size: 20px 500px;
}
</style>
</head>
<body>
<section>Study Tonight</section>
<section>Study Tonight</section>
<section>Study Tonight</section>
<section>Study Tonight</section>
</body>
</html>
Output:
Live Example
Here in this live example, you can test the code and execute the example using different values or even edit the code example.
Browser Compatibility
There are many browsers which do not support all the latest CSS properties. Hence, while developing any webpage, if you are using any CSS property you must check the browser compatibility for that CSS property and then use it. It is of immense importance today when there is a large variety of web browsers available.
| Name of Browser |
Background size |
contain and cover |
| Chrome |
85 |
85 |
| Edge |
85 |
85 |
| Firefox |
no |
no |
| Internet Explorer |
no |
no |
| Opera |
71 |
71 |
| Safari |
no |
no |
| Webview Android |
85 |
85 |
| Chrome Android |
85 |
85 |
| Firefox Android |
no |
no |
| Opera Android |
60 |
60 |
| IOS Safari |
no |
no |
| Samsung Internet |
no |
no |
Conclusion
The initial value for the content-visibility property in CSS is visible. This property is applicable to elements for which layout containment can apply. It is not an inherited property. The computed value for this property is the as specified one. The animation type for this property is discrete.
