The CSS language is filled with small gaps that are irritating to navigate. Between CSS properties to cover a container and its contents, there may be nonetheless room for enchancment. visibility: hidden retains top and width integrity whereas show: none on a container hides every part. You need to use .container > * to cover all contents of a container, however what if there was a greater method?
There’s a higher technique to cover the contents of a component whereas respecting the container’s border and dimensions. That higher method 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 through the use of content-visibility: hidden is a lot nicer from a upkeep perspective!
I’m an Impostor
That is the toughest factor I’ve ever needed to write, a lot much less admit to myself. I’ve written resignation letters from jobs I’ve cherished, I’ve ended relationships, I’ve failed at a number of duties, and let myself down in my life. All of these emotions had been very…
MooTools ASCII Artwork
I did not understand that I actually was a nerd till I might admit to myself that ASCII artwork was higher than the items Picasso, Monet, or Van Gogh might create. ASCII artwork is unmatched in its magnificence, simplicity, and … OK, effectively, I am being ridiculous; ASCII…
