If so, does it effectively deprecate the visibility property?
(I realize that Internet Explorer does not yet support this CSS2 property.)
Comparisons of layout engines
See also: What is the difference between visibility:hidden and display:none
views:
655answers:
6
+2
A:
I'm not entirely sure of this, but I think screen readers don't read things that are set to visibility hidden, but they may read things regardless of their opacity.
That's the only difference I can think of.
Phil
2008-11-07 15:12:33
How would that effect the result then? Perhaps in terms of what is included in the DOM? My test cases show that Mozilla is not throwing away visibility:hidden elements.
Chris Noe
2008-11-07 15:18:46
The elements would be in the DOM regardless of CSS style, I mean that blind users using screen reader software may have text in the opacity:0 element read to them, whereas they wouldn't if the same element had visibility:hidden. It's an accessibility concern really, as the result is different.
Phil
2008-11-07 15:23:44
Got it. Thanks Phil.
Chris Noe
2008-11-07 15:38:14
+3
A:
Im not sure entirely, but this is how i do cross browser transparency:
opacity: 0.6;
-moz-opacity: 0.6;
filter: alpha(opacity=60);
objects with Visibility:hidden still have shape, they just arent visible. opacity zero elements can still be clicked and react to other events.
Andrew Bullock
2008-11-07 15:15:22
opacity is used to decide how the element is drawn ontop of the background. With opactiy set to 0 the element naturally takes space but nothing is drawn because 0% of the element colour is mixed with 100% of the background resulting in nothing new appearing. hidden and similar friends mean the element is skipped when drawing takes place.
mP
2010-10-10 23:57:29
A:
What Phil says is true.
IE supports opacity though:
filter:alpha(opacity=0);
Diodeus
2008-11-07 15:15:47
+4
A:
Here is a compilation of verified information from the various answers.
Each of these CSS properties is in fact unique. In addition to rendering an element not visible, they have the following additional effect(s):
- Collapses the space that the element would normally occupy
- Responds to events (e.g., click, keypress)
- Participates in the taborder
collapse events taborder
opacity: 0 No Yes Yes
visibility: hidden No No No
visibility: collapse * No No
display: none Yes No No
* Yes inside a table element, otherwise No.
Chris Noe
2008-11-07 18:25:45
A:
The properties have different semantic meanings. While semantic CSS sounds like it may be silly, as other users have mentioned it has an impact on devices like screen readers -- where semantics impact the accessibility of a page.
Zack Mulgrew
2008-11-07 18:34:13
A:
No.
Elements with opacity create new stacking context.
Also, CSS spec doesn't define this, but elements with opacity:0 are clickable, and elements with visibility:hidden are not.
porneL
2009-04-12 19:59:56