Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
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. 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.
Note: The contentvisibilityautostatechange
event fires on any element with content-visibility: auto
set on it when its rendering work starts or stops being skipped. This provides a convenient way for an app's code to start or stop rendering processes (e.g. drawing on a <canvas>
) when they are not needed, thereby conserving processing power.