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!