If display: none; completely disappears the element from the web page, why would we use visibility: hidden;?
Answer
The only advantage we may acquire by using visibility: hidden; over display: none; will be for layout purposes. If after having the value none on the display property, our web layout changes from what we want it or need it to be, then visibility: hidden; will be our best option. That said, neither option is accessible to most screen readers, which allow the visually impaired to interact with web pages, therefore options, like positioning the element outside the boundaries of the screen and changing its opacity value to provide transparency, might be things worth exploring when thinking on inclusiveness.
After reading the answer, which is very clear in its intention and alternatives, I still donât understand the conditions under as a developer you would want to use the visibility:hidden element to hide something but keep its space? Can you help me with an example that may help me?
it can be helpful for things like collapsing dropdowns and such. if you want transitions to work well, then using Visibility and pushing the elements off the screen can make it work better than simply Display.
One situation where using visibility: hidden may be âbetterâ/preferred over using display:none is when you dynamically toggle an elementâs visibility with JavaScript.
By toggling the visibility attribute, you will NOT cause a shift of the surrounding elements (mainly, if there is content below your element). The space the element held is still reserved in the page flow. If you toggle display instead, its space is released and the page will have to reflow.
For those curious, here are the two options in JavaScript to try out on an element in the middle of a page:
So what I am getting from these answers is that using the visibility: hidden will be good for keeping the page easier to load? Iâve also seen that it can be helpful to the visually impaired? These are very confusing to me unless the first thing I mentioned is true. How would this help a visually impaired person? Because the computer would still register that empty space in a reading out loud feature to the person that the option is there? Why is this good for only one type of person. If you are going through this much work to design the css⌠For the display⌠Why not just not include it? I feel thick-skulled and just canât register the point. In the Code Academy lesson, the example they use is a
Donate
with CSS being .future { Visibility: hidden}. If someone wishes to have a donate option, why would they want it only to appear in the code for people who are visually impaired or a code reader reading the code of the page on their own⌠Wouldnât they want the visual people to donate too? This example really proves confusing to me because donating would be an essential part of such a page. -Sincerely, dumbfounded coding amateur
Much like you tippiexd, I am very new to coding. The main reason I can think of that you might use the hidden property is for styling the page.
For example, if we had not yet set up the charity or JS for the donate button to link to, we may wish to hide it while the page is live, until we could resolve the link. Once we have resolved the link, when we make the button visible, the layout will not change as the space for the button was reserved in our original layout when we hid the button.
Hope this helps, itâs how I made sense of the âwhy?â.
For this particular exercise, why not use opacity since that has the same functionality as visibility? Also, opacity has a larger range of visibility, so shouldnât developers lean more towards opacity more?
This is in my opinion, the best answer and I went ahead a clicked the âheartâ thing because this is quite a common sense answer that flashed through my head while reading the lesson/exercise.
removes the element from normal flow and collapses the remaining content to occupy that space.
visibility: hidden;
does not remove the element from normal flow, it only hides the containerâs content from view. Nothing in the page is affected (there is no collapse).
Iâm just wondering why we would want to hide an elementâs content from the page. I mean canât we just omit it and not include the element from our HTML?
There are lots of scenarios but it boils down to waiting for user interaction. Drop down and fly out is built on the concept. The content is in the document but only visible once the user interacts.
When using visibility: hidden; on an element, the element itself is hidden but the space reserved for it is still displayed on the web page. display: none; on the other hand hides an element and its reserved space. This means that if using display: none; messes up your web page layout, it would be better to use visibility: hidden; as it keeps the space reserved for the hidden element