#142: Hiding Things With CSS

Share this:

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!

This comment thread is closed. If you have important information to share, please contact us.

How do you stay up to date in this fast⁠-⁠moving industry?

A good start is to sign up for our weekly hand-written newsletter. We bring you the best articles and ideas from around the web, and what we think about them.

👋

CSS-Tricks* is created, written by, and maintained by Chris Coyier and a team of swell people. It is built on WordPress and powered up by Jetpack. It is made possible through sponsorships from products and services we like.