CSS content-visibility

By  on  

The CSS language is full of small gaps which are frustrating to navigate. Between CSS properties to hide a container and its contents, there is still room for improvement. visibility: hidden keeps height and width integrity while display: none on a container hides everything. You can use .container > * to hide all contents of a container, but what if there was a better way?

There is a better way to hide the contents of an element while respecting the container's border and dimensions. That better way is using the content-visibility property:

.my-container.contents-loading {
  content-visibility: hidden;
}

A demo of such functionality:

See the Pen Untitled by David Walsh (@darkwing) on CodePen.

Avoiding a .container > * selector by using content-visibility: hidden is so much nicer from a maintenance perspective!

Recent Features

  • By
    Being a Dev Dad

    I get asked loads of questions every day but I'm always surprised that they're rarely questions about code or even tech -- many of the questions I get are more about non-dev stuff like what my office is like, what software I use, and oftentimes...

  • By
    Introducing MooTools Templated

    One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating: new Element Madness The first way to create UI-driven...

Incredible Demos

Discussion

  1. Chris Zuber

    I’ve found that it can cause accessibility issues and false problems in Lighthouse reports. But that’s content-visibility: auto.

    For example, I have large white text on a black background in a footer, but I think Chrome doesn’t properly test/paint it/something because it says all text has insufficient contrast ratio (it has a ratio of like 12). Screen readers also seem to be problematic, though I can’t say exactly what’s going on there.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!