The content-visibility controls the the rendering of a content.
Well, it does more than that but in a nutshell that’s what it does.
You can ask user agents not to display a particular large layouts initially and render it later on. That’s the trick to make the page load faster.
values
The content-visibility property has 3 keyword values.
content-visibility: visible
This will load the content with a normal load.
content-visibility: auto
With this option set, element will only skip the contents if it’s not relevant to the user or is off-screen.
With this option the content is still available.
section {
content-visibility: auto;
contain-intrinsic-size: 0 1000px;
}
contain-intrinsic-size
Using contain-intrinsic-size you’re basically setting a placeholder where the content will be rendered later on.
If you don’t specify contain-intrinsic-size then the height will be set as 0, which is not the idea solution as per now. I’m sure w3c will come up with a better solution in future.
content-visibility: hidden
This is basically like setting the display property as none. If you set content-visibility as hidden then the element won’t render it’s content but it’ll preserve rendering state.
With this option the content is NOT available but can be made quickly available when needed.
To use content-visibility: hidden, we need to switch between classes to remove the “hidden” value.
section.auto {
content-visibility: auto;
contain-intrinsic-size: 0 1000px;
}
section.hidden {
content-visibility: hidden;
contain: style layout paint; //avoid layout shift
}
Web.dev and MDN both have really good articles to read more about it.
content-visibility examples page speed property render
