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!
7 Essential JavaScript Functions
I remember the early days of JavaScript where you needed a simple function for just about everything because the browser vendors implemented features differently, and not just edge features, basic features, like
addEventListenerandattachEvent. Times have changed but there are still a few functions each developer should…
Create Spinning Rays with CSS3 Animations & JavaScript
Thomas Fuchs, creator of script2 (scriptaculous’ second iteration) and Zepto.js (mobile JavaScript framework), creates outstanding animated elements with JavaScript. He’s a legend in his own right, and for good reason: his work has helped to inspire developers everywhere to drop Flash and opt…
Source link
