CSS content-visibility

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... more →
Posted in: JavaScript