CSS content-visibility

The CSS language is stuffed with small gaps which might be irritating to navigate. Between CSS homes to cover a container and its contents, there’s nonetheless room for development. visibility: hidden helps to keep peak and width integrity whilst show: none on a container hides the whole thing. You’ll be able to use .container > * to cover all contents of a container, however what if there was once a greater method?

There’s a higher approach to disguise the contents of a component whilst respecting the container’s border and dimensions. That higher method is the usage of the content-visibility assets:

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

A demo of such capability:

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

Warding off a .container > * selector via the usage of content-visibility: hidden is such a lot nicer from a upkeep viewpoint!