Wednesday, April 17, 2024
HomeSoftware DevelopmentCSS content-visibility

CSS content-visibility


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…


RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments