Skip to content

CSS content-visibility

The CSS language is stuffed with small gaps which might be irritating to navigate. Between CSS homes to cover a container and its contents, there’s nonetheless room for development. visibility: hidden helps to keep peak and width integrity whilst show: none on a container hides the whole thing. You’ll be able to use .container > * to cover all contents of a container, however what if there was once a greater method?

There’s a higher approach to disguise the contents of a component whilst respecting the container’s border and dimensions. That higher method is the usage of the content-visibility assets:

.my-container.contents-loading {
  content-visibility: hidden;

A demo of such capability:

See the Pen Untitled via David Walsh (@darkwing) on CodePen.

Warding off a .container > * selector via the usage of content-visibility: hidden is such a lot nicer from a upkeep viewpoint!

  • 7 Essential JavaScript Functions

    I keep in mind the early days of JavaScript the place you wanted a easy serve as for almost the whole thing for the reason that browser distributors carried out options another way, and no longer simply edge options, elementary options, like addEventListener and attachEvent.  Instances have modified however there are nonetheless a couple of purposes every developer will have to…

  • Vibration API

    Lots of the new APIs supplied to us via browser distributors are extra focused towards the cellular consumer than the desktop consumer.  A kind of easy APIs the Vibration API.  The Vibration API lets in builders to direct the instrument, the usage of JavaScript, to vibrate in…

  • CSS Circles
  • MooTools Documentation Search Favelet

    I will percentage one thing with you that may blow your thoughts: I should not have the MooTools documentation memorized. I simply do not. I seek advice from the MooTools medical doctors incessantly to determine the order of parameters of Extra categories and the way very best to make use of…

Ready to get a best solution for your business?