Post

MDN Web Docs
@developer.mozilla.org

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 👇 developer.mozilla.org/en-US/docs/...

8 reposts66 likes

fry69
@fry69.dev

auto comes with restrictions, e.g. margin collapse and other things that would affect already layout things do not work anymore. But for many situations this would still be a good default and starting point. Maybe content-visibility: auto; will find its way into templates?

fry69
@fry69.dev

content-visibility: auto; is not a magic bullet on its own. See this great video, it requires a tiny bit of work and consideration (said restrictions) ->

Jake Archibald@jakearchibald.com

I haven't. I've been focusing on stuff as it lands in Firefox or becomes baseline. Whereas content-visibility became baseline in 2024. I did something on it in a previous life though www.youtube.com/watch?v=FFA-...

youtube.comSlashing layout cost with content-visibility - HTTP 203YouTube video by Chrome for Developers
Jakob E
@jakob-e.bsky.social

I think I remember in-page anchor links also struggle a bit if scroll-behavior is set to smooth (distance change). Not unexpected - but something to consider