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 (@darkwing)
on CodePen.
Avoiding a .container > *
selector by using content-visibility: hidden
is so much nicer from a maintenance perspective!
Your early CSS books were instrumental in pushing my love for front end technologies. What was it about CSS that you fell in love with and drove you to write about it?
At first blush, it was the simplicity of it as compared to the table-and-spacer...
One event that's always been lacking within the document is a signal for when the user is looking at a given tab, or another tab. When does the user switch off our site to look at something else? When do they come back?
Mozilla Aurora 11 was recently released with a bevy of new features. One of those great new features is their initial implementation of the Battery Status API. This simple API provides you information about the battery's current charge level, its...
Counters. They were a staple of the Geocities / early web scene that many of us "older" developers grew up with; a feature then, the butt of web jokes now. CSS has implemented its own type of counter, one more sane and straight-forward than the ole...
I’ve found that it can cause accessibility issues and false problems in Lighthouse reports. But that’s
content-visibility: auto
.For example, I have large white text on a black background in a footer, but I think Chrome doesn’t properly test/paint it/something because it says all text has insufficient contrast ratio (it has a ratio of like 12). Screen readers also seem to be problematic, though I can’t say exactly what’s going on there.