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!
![I’m an Impostor]()
This is the hardest thing I've ever had to write, much less admit to myself. I've written resignation letters from jobs I've loved, I've ended relationships, I've failed at a host of tasks, and let myself down in my life. All of those feelings were very...
![Creating Scrolling Parallax Effects with CSS]()
Introduction
For quite a long time now websites with the so called "parallax" effect have been really popular.
In case you have not heard of this effect, it basically includes different layers of images that are moving in different directions or with different speed. This leads to a...
![Highlight Table Rows, Columns, and Cells Using MooTools 1.2.3]()
Row highlighting and individual cell highlighting in tables is pretty simple in every browser that supports :hover on all elements (basically everything except IE6). Column highlighting is a bit more difficult. Luckily MooTools 1.2.3 makes the process easy.
The XHTML
A normal table. The cells...
![MooTools TextOverlap Plugin]()
Developers everywhere seem to be looking for different ways to make use of JavaScript libraries. Some creations are extremely practical, others aren't. This one may be more on the "aren't" side but used correctly, my TextOverlap plugin could add another interesting design element...
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.