content-visibility

Definition

The content-visibility CSS property controls whether or not an element renders its contents at all, along with forcing a strong set of containments, allowing user agents to potentially omit large swathes of layout and rendering work until it becomes needed. Basically it enables the user agent to skip an element's rendering work (including layout and painting) until it is needed — which makes the initial page load much faster.

Examples

In this example, the .container class has content-visibility: auto; set, which means that the content of the element will be visible and rendered as normal:

.container {
  content-visibility: auto;
}

In this example, the .container class has content-visibility: hidden; set, which means that the content of the element will not be visible and will not be rendered:

.container {
  content-visibility: hidden;
}

In this example, the .container class has content-visibility: visible; set, which means that the content of the element will be visible and will be rendered, but the layout calculation for it will be skipped for performance optimization:

.container {
  content-visibility: visible;
}

Values

Best Practices

• Use content-visibility to improve the performance of large or complex pages with many elements.
• Consider using content-visibility: hidden for elements that are not in the current viewport or not visible to the user.
• Use content-visibility: visible for elements that are needed immediately and cannot be deferred.

Browser Compatibility