10 useful CSS properties you can start using today
You might have 2 common CSS properties in mind when you read content and visibility.

display: none

visibility: hidden

They are often used to control visibility of the content. The new content-visibility property is similar, but it provides us with several advantages. The main one is improvement of performance!

The content-visibility property, launching in Chromium 85, might be one of the most impactful new CSS properties for improving page load performance.

It enables the browser to skip rendering work, including layout and painting, until it is needed. That means that off screen content won’t be rendered and we can save several milliseconds on initial load and boost the performance.

How to use it? The easiest way is to use auto as a value, so the browser determines when and how to use it.

.container {

content-visibility: auto;

contain-intrinsic-size: 1000px;

}

Notice contain-intrinsic-size property.

In order to realize the potential benefits of content-visibility , the browser needs to apply size containment to ensure that the rendering results of contents do not affect the size of the element in any way.

We need to set contain-intrinsic size to the element otherwise the browser might think its height is 0, and in that case we won’t gain performance benefit.

To have a better control over showing/hiding elements you could also use content-visibility: hidden. It behaves like display: none, but it preserves the rendering state of the element!

For more details I recommend you to read this article.

Browser compatibility

It’s similar to aspect-ratio, but here Firefox doesn’t have even a partial support. It doesn’t matter much since this is a feature that won’t break your site if you use it and it’s not supported. It can only help you with performance when applied correctly.
['Miroslav Šlapka']
['UI', 'CSS', 'Technology', 'Resources', 'HTML']