The CSS language is filled with small gaps that are irritating to navigate. Between CSS properties to cover a container and its contents, there’s nonetheless room for enchancment. visibility: hidden retains top and width integrity whereas show: none on a container hides every thing. You should utilize .container > * to cover all contents of a container, however what if there was a greater approach?
There’s a higher option to disguise the contents of a component whereas respecting the container’s border and dimensions. That higher approach 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 through the use of content-visibility: hidden is a lot nicer from a upkeep perspective!
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 (accurately so, by spec) although…
JavaScript Promise API
Whereas synchronous code is simpler to observe and debug, async is mostly higher for efficiency and adaptability. Why “maintain up the present” when you’ll be able to set off quite a few requests directly after which deal with them when every is prepared? Guarantees are turning into a giant a part of the JavaScript world…
CSS Vertical Heart with Flexbox
I am 31 years outdated and really feel like I have been within the internet improvement recreation for hundreds of years. We knew eternally that layouts in CSS have been a nightmare and all of us thought of flexbox our savior. Whether or not it seems that approach stays to be seen however flexbox does simply…
Fancy FAQs with jQuery Sliders
Ceaselessly requested questions may be tremendous boring, proper? They do not need to be! I’ve already proven you find out how to create fancy FAQs with MooTools — this is find out how to create the identical impact utilizing jQuery. The HTML Merely a sequence of H3s and DIVs wrapper…
