What is the point of hidden elements (CSS Visibility, 15/16)

What is the purpose of the “visibility” element? Why would you want “hidden” elements on your site that no one can see unless they look at the source code - shouldn’t everything on your page be “visible” by default? I don’t get why anyone would bother adding content to a site that they don’t want the user to see - if I don’t want the user to see it, wouldn’t I simply delete it from the page instead?

Thank you!

Everything could be visible, yes, and static, also yes. But what of user interaction? How does the page respond so the user knows their interaction has been acknowledged? Answer: Through visual signals, such as revealing a previously hidden element.

To gain a complete understanding of visibility: hidden; we need to understand normal flow. When an object has a visibility property, its position and dimensions in normal flow are preserved. Only the hidden content is not visible. The space it would take up is still there on the page.

It has to do with element hop, the action of elements below a removed element hopping up to fill the void. Rapid visual side effects can be annoying, disturbing and even cause seizures. The visibility property was devised to prevent this sort of thing.

A terrible example, yet still appropriate in a sense would be a blinking object. We could have a fragment of text that blinks given a specified time interval. When it is not visible the space it occupies will still be there.

There is more to this that just visual, though. The difference between display: none and visibility: hidden goes much deeper, right to the heart of the content.

We could have a paragraph or entire essay taken out of the normal flow using display: none, and it would be virtually invisible. But if we leave it in normal flow and give it a visibility value of hidden, it will only be invisible to sighted users. Screen readers will still be able to read it, as will search engines when they are crawling the pages on one’s site. Something to keep in mind.

The downside of the visibility property is that it protects its screen real estate. For this reason we do have to be mindful of how we implement it.

1 Like

Wow! That’s really helpful - thank you very much! :smiley:

1 Like

You’re welcome!

This has a loose connection to the topic in how we might prevent screen bounce…


The CSS is where the controls are set, and the event handlers manipulate them.

        <input id="percent" value="0" readonly>
        <button id="update">Update</button>
        <p id="status">Updating&hellip;</p>
        <p id="success">Done!</p>
        <button id="simulate">Simulate</button>

Various elements in the above may or may not be visible, depending what has been clicked or what stage the program is at. This doesn’t use the visibility property because there is always something visible, but if we ever wanted to preserve that space, visibility would be our goto.


Got it! That’s some next-level stuff, right there! :grin:

Thanks again!!!

1 Like

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.