Home Software Development CSS content-visibility

CSS content-visibility

CSS content-visibility

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

There’s a higher approach to disguise the contents of a component whereas respecting the container’s border and dimensions. That higher approach 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 by utilizing content-visibility: hidden is a lot nicer from a upkeep perspective!

  • 5 Awesome New Mozilla Technologies You’ve Never Heard Of

    My journey to Mozilla Summit 2013 was unimaginable.  I’ve spent a lot time specializing in my undertaking that I had overlooked the entire nice work Mozillians have been placing out.  MozSummit supplied the proper reminder of how sensible my colleagues are and the way a lot…

  • Create a Sheen Logo Effect with CSS



Please enter your comment!
Please enter your name here