What’s the difference between [visibility: hidden;] and [display:none;]?
Why would someone use visibility over display, and vice versa?
I’m sorry, I was sure I had already introduced you the the idea of on-line references to find this kind of thing out fast.
As far as I understand, when you use visibility: hidden, the element is not visible, but it still occupies space in the layout. When you use display: none, the element not only is invisible, but it does not take up any space in the layout.
4 Likes
A nice read to understand with examples could be :
Worth reading for more detailed information:
and
display:none can create accessibility issues, as the content is inaccessible to screen readers and also to keyboard navigation. I’m not sure how screen readers cope with visibility:hidden, but it is also inaccessible to keyboard navigation if used on a link.
Edit: Thanks for that link, @Swizz. Now I know the answer.
The next property on our list is visibility. Setting it to hidden will hide our element. Just like the opacity property, the hidden element will still affect the layout of our web page. The only difference is that this time it will not capture any user interaction when hidden from the user. Additionally, the element will also be hidden from screen readers.
How come it works fine on my browser?
How come what work fine?
Presumably because you are not using a screen reader or keyboard navigation.
1 Like
I don’t use either of those.
Exactly my point.
But others do.
About what fraction of the total population of the world?
There is a legal requirement in many countries of the world to support users with disabilities ie people who use screen readers or keyboard navigation amongst other technologies.
1 Like
I don’t know about that, but at least 16.7% of contributors to this topic so far.
2 Likes
I don’t have the figures for that. But a more useful statistic would be the proportion of web users, rather than world population.
1 Like
it’s a button you click on, it has nothing to do with screen readers.
So how would anyone know what the button is for?
They would find out by clicking on it to see what happens.
FTFY