#142: Hiding Things With CSS

Avatar of Chris Coyier
Chris Coyier on (Updated on )

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit!

There isn’t just a single CSS property that you reach for when hiding and showing things in CSS. There are a bunch of considerations that we’ll go over in this video.

For instance, there is the display property in which display: none; is very effective at hiding things. But it will hide that element from assistive technology as well, and you don’t always want that, like a dropdown navigation menu (the dropdowns are visually hidden but shouldn’t be hidden from assistive technology).

And display isn’t transitionable either, so if you want to fade in / fade out that element with transition, that’s out. Unless you involve JavaScript to apply that property only after the transition has happened.

What is transitionable? opacity is, and turns out visibility is too. This combination is pretty useful together, as once an element has visibility: hidden; it doesn’t interfere with events like clicks/taps. This combo doesn’t take the element out of page flow though, which can be useful or not useful. The position property might be useful in those circumstances.

See! So much to think about!