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 peak and width integrity whereas show: none on a container hides all the pieces. You should utilize .container > * to cover all contents of a container, however what if there was a greater approach?

There’s a higher option to cover 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!

  • How I Stopped WordPress Comment Spam

    I like virtually each a part of being a tech blogger:  studying, preaching, bantering, researching.  The one half about running a blog that I completely detest:  coping with SPAM feedback.  For the previous two years, my weblog has registered 8,000+ SPAM feedback per day.  PER DAY.  Bloating my database…

  • CSS 3D Folding Animation

Leave a Reply

Your email address will not be published. Required fields are marked *