When is it better to use visibility: hidden?

Question

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.

14 Likes

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?

12 Likes

@ pepeturo3023218952 : I just used the visibility: hidden property to solve an issue (which I explain Here ).

–> However, I must advise you that I’m not sure that it was an appropriate way of using this property. <–

5 Likes

Does using display: none bring about the same results on code and visually as a comment element
(< ! - - comment- - >)?

2 Likes

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.

8 Likes

neither part appears in the Document Object Model so it will not render at all, if that’s what you mean

3 Likes

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:

document.getElementById("myElement").style.visibility = "hidden";

and

document.getElementById("myElement").style.display = "none";
13 Likes

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
    7 Likes

    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?”.

    49 Likes

    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?

    2 Likes

    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.

    Sorry Guyz … Still confused when to use visibility hidden as most of time we use display: none :slightly_smiling_face:

    display: none;
    

    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).

    13 Likes

    Thanks a lot but can you please illustrate more examples of when we will preferably use Visibility?

    It’s not about preference. It is about whether we wish to reserve screen space or not. Nobody likes content jumping about.

    5 Likes

    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?

    2 Likes

    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.

    6 Likes

    Oops! I never checked back till now. That’s a great way of looking at it! I see its purpose now! Haha. Thank you!

    Hello,

    1. display: none --| will make items disappear from rendering.
    2. visibility: hidden --| will be rendered but not displayed/hidden.
    3. <p hidden> hello batman </p> --| this seems to be blend of both. It is rendered but not took the space as it should have in the second case.

    Any thoughts?

    //Rahul

    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

    1 Like