This CSS property tells the browser which styles and elements to skip rendering until you need them.
Normally the browser renders the entire page on load, which means it renders all the elements on the screen that have exactly the style you expect.
content-visibility takes a different approach. Elements in a block with the content-visibllity: auto style are drawn at the moment they are needed. They are rendered as a white box just before the element becomes visible on the page.
Up to this point, only the dimensions of the element are calculated, and the style of the element, including all child elements, is ignored.
Since this is a CSS property, simply declaring it allows you to set the visibility of the element’s content.
.element {
content-visibility: auto;
}
Specifying the natural size of an element with contain-intrinsic-size
To realize the potential benefits of content-visibility, the browser needs to apply a size constraint to ensure that content rendering results do not affect the element’s size in any way.
This means that the element will be laid out as if it were empty. If the element does not have the height specified in the regular block layout, then it will have a zero height.
This may not be ideal as the scrollbar size will shift depending on each story having a non-zero height.
Fortunately, CSS provides another property, contain-intrinsic-size, which effectively determines the natural size of an element if the element is affected by a size constraint. In our example, we set it to 1000px as an estimate of the height and width of the sections.
This means it will lay out as if it had a single child element with “inside size” dimensions, ensuring that your unsized blocks still take up space. contain-intrinsic-size acts as the size of the placeholder instead of the rendered content
.element {
content-visibility: auto;
contain-intrinsic-size: 1000px;
}
Properties
Visible (content-visibility: visible) – visible is the default and has no effect on disabling content-visibility. The content is displayed normally as soon as the page is loaded.
hidden (content-visibility: hidden) – it combines the best features of CSS display: none and visibility: hidden. The element does not need to be drawn on load (which saves time) and does not need to be re-rendered when visibility changes, except the first time it becomes visible.
In other words, you can now hide an element much faster and then make it visible again. Re-rendering of the element is not required.
auto (content-visibility: auto) – This is a value that can significantly improve page loading speed. Elements that fall under this rendering method are rendered only to a very limited extent. No styles are applied while the element is not visible to the user. Drawing will happen when the element is in view.
What is the difference between content-visibility and visibility css
visibility and content-visibility are two different CSS properties that control the visibility of elements on a web page, but they perform different functions.
visibility – the visibility property is used to control the visibility of an element. It can take the values visible (default), hidden and collapse (for table elements). When the value is set to hidden, the element becomes invisible, but its location in the document is still respected and remains on the layout flow.
.hidden-element {
visibility: hidden;
}
content-visibility – The content-visibility property is a newer concept designed to optimize performance.
It can take the values visible (default), auto and hidden. When set to auto or hidden, the browser can optimize the rendering of the element’s content, especially for large lists or blocks of text, which can result in improved page loading speed and performance.
.optimized-block {
content-visibility: auto;
}
In general, visibility controls the visibility of an element, but the location of the element is preserved, and content-visibility additionally provides optimizations to control the performance and layout of elements on the page, especially when dealing with large amounts of content.
Browser support – https://caniuse.com/css-content-visibility