CSS content-visibility for React devs

Hey, it's Seb from This Week In React here 👋

For your information, with Safari 18 release, CSS content-visibility is now available in all browsers, and I think React developers should care.

I wanted to share the news in my newsletter, but the information is spread over Twitter, so I thought I'd aggregate the relevant bits here to make it more convenient to understand. It's not going to be a deep dive, I'm just sharing interesting references you might like.

Let's start with the MDN description:

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.

TLDR: you can improve your page rendering performance (including Lighthouse score and SEO) with this new CSS rule, in particular with the content-visibility: auto; value on pages containing large lists.

It can be a good middle ground between bad rendering performance, and a React virtualization library, as long as you are able to approximately estimate the size of the list items.

.large-list-item {
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
}

Malte Ubl (CTO of Vercel) also explained this on Twitter:

Vercel already uses it in production, giving some example use cases:

If you want a more concrete optimization case study, there's also this article from Nolan Lawson explaining how he optimized a slow emoji picker with content-visibility. Unfortunately, it doesn't seem to work immediately on <img loading="lazy"> tags.

Bonus: you improve the accessibility of your app compared to most virtualization solutions: you can ctrl+f and search for content that would otherwise not be in the DOM.

Even if it's not widely supported yet, it can be adopted today as a progressive enhancement.

See also this web.dev article.

Don't forget to subscribe to This Week In React for more news like this.