The CSS language is stuffed 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 peak and width integrity whereas show: none on a container hides every thing. You should use .container > * to cover all contents of a container, however what if there was a greater method?
There’s a higher option to disguise 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 by utilizing content-visibility: hidden is a lot nicer from a upkeep perspective!
Designing for Simplicity
Earlier than we get began, it is price me spending a short second introducing myself to you. My title is Mark (or @integralist if Twitter occurs to be your communication device of selection) and I at present work for BBC Information in London England as a principal engineer/tech…
Serving Fonts from CDN
For optimum efficiency, everyone knows we should put our property on CDN (one other area). Together with these property are customized internet fonts. Sadly customized internet fonts by way of CDN (or any cross-domain font request) do not work in Firefox or Web Explorer (appropriately so, by spec) although…
Create Spinning Rays with CSS3 Animations & JavaScript
Thomas Fuchs, creator of script2 (scriptaculous’ second iteration) and Zepto.js (cellular JavaScript framework), creates excellent animated components with JavaScript. He is a legend in his personal proper, and for good purpose: his work has helped to encourage builders all over the place to drop Flash and decide…
Supply hyperlink
