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).
display isn’t transitionable either, so if you want to fade in / fade out that element with
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!