This content originally appeared on David Walsh Blog and was authored by David Walsh
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!
The post CSS content-visibility appeared first on David Walsh Blog.
This content originally appeared on David Walsh Blog and was authored by David Walsh
David Walsh | Sciencx (2023-04-28T00:13:28+00:00) CSS content-visibility. Retrieved from https://www.scien.cx/2023/04/28/css-content-visibility/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.