Home Programming News 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 peak and width integrity whereas show: none on a container hides every little thing. You should use .container > * to cover all contents of a container, however what if there was a greater manner?

There’s a higher technique to conceal the contents of a component whereas respecting the container’s border and dimensions. That higher manner 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!

  • 6 Things You Didn’t Know About Firefox OS

    Firefox OS is everywhere in the tech information and for good motive:  Mozilla’s lastly given net builders the platform that they should create apps the way in which they have been creating them for years — with CSS, HTML, and JavaScript.  Firefox OS has been quickly enhancing…

  • From Webcam to Animated GIF: the Secret Behind chat.meatspac.es!



Please enter your comment!
Please enter your name here