CSS content-visibility

The CSS language is filled with small gaps that are irritating to navigate. Between CSS properties to cover a container and its contents, there may be nonetheless room for enchancment. visibility: hidden retains top and width integrity whereas show: none on a container hides every part. You need to use .container > * to cover all contents of a container, however what if there was a greater method?

There’s a higher technique to cover the contents of a component whereas respecting the container’s border and dimensions. That higher method is utilizing the content-visibility property:

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

A demo of such performance:

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

Avoiding a .container > * selector through the use of content-visibility: hidden is a lot nicer from a upkeep perspective!

  • I’m an Impostor

    That is the toughest factor I’ve ever needed to write, a lot much less admit to myself.  I’ve written resignation letters from jobs I’ve cherished, I’ve ended relationships, I’ve failed at a number of duties, and let myself down in my life.  All of these emotions had been very…

  • CSS 3D Folding Animation

Related Articles


Please enter your comment!
Please enter your name here

Latest Articles