Post · bonfire.cafe

@mdn@mastodon.social · 2 hours ago

Speed up rendering with content-visibility: auto ⚡

This CSS property skips rendering off-screen content until needed, giving massive performance wins on long pages.

⋅ Pairs with contain-intrinsic-size
⋅ Zero-effort lazy rendering

Learn more 👇
https://developer.mozilla.org/en-US/docs/Web/CSS/content-visibility

CSS snippet detailing the `content-visibility` property with keyword and global values for efficient rendering practices.

content-visibility CSS property - CSS | MDNMDNMDNMozilla

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.

0

No replies yet

Be the first to share your thoughts.