The CSS language is full of small gaps which are frustrating to navigate. Between CSS properties to hide a container and its contents, there is still room for improvement. visibility: hidden keeps height and width integrity while display: none on a container hides everything. You can use .container > * to hide all contents of a […]
The post CSS content-visibility appeared first on David Walsh Blog.
The CSS language is full of small gaps which are frustrating to navigate. Between CSS properties to hide a container and its contents, there is still room for improvement. visibility: hidden
keeps height and width integrity while display: none
on a container hides everything. You can use .container > *
to hide all contents of a container, but what if there was a better way?
There is a better way to hide the contents of an element while respecting the container’s border and dimensions. That better way is using the content-visibility
property:
.my-container.contents-loading { content-visibility: hidden; }
A demo of such functionality:
See the Pen
Untitled by David Walsh (@darkwing)
on CodePen.
Avoiding a .container > *
selector by using content-visibility: hidden
is so much nicer from a maintenance perspective!
The post CSS content-visibility appeared first on David Walsh Blog.
No responses yet