Does opacity:0 have exactly the same effect as visibility:hidden

Question

If so, does it effectively deprecate the visibility property?

(I realize that Internet Explorer does not yet support this CSS2 property.)
Comparis

Answer 1

While making a userstyle that affects elements in a contenteditable, I noticed that if you set something to visibility: hidden, then the input caret doesn't really want to interact with it. Eg if you have

<div contenteditable><span style='visibility: hidden;'></span></div>

...then it seems if you focus that div/span, you can't actually type in it. Whereas with opacity: 0 it seems you can. I haven't tested this extensively, but figured it was worth mentioning this here as nobody else on this page has talked about the effects on text input. This seems possibly related to the events stuff mentioned above though.

Answer 2

What Phil says is true.

IE supports opacity though:

filter:alpha(opacity=0);

Answer 3

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.

Answer 4

Here is a compilation of verified information from the various answers.

Each of these CSS properties is unique. In addition to rendering an element not visible, they have the following additional effect(s):

1. Collapses the space that the element would normally occupy
2. Responds to events (e.g., click, keypress)
3. Participates in the taborder

                     collapse events taborder
opacity: 0              No     Yes     Yes
visibility: hidden      No     No      No
visibility: collapse   Yes*    No      No
display: none          Yes     No      No

* Yes inside a table element, otherwise No.

Answer 5

There are many differences between visibility and opacity. Most of the answers mention some differences, but here is a complete list.

1. opacity does not inherit, while visibility does

2. opacity is animatable while visibility is not.
   (Well, technically it is, but there is simply no behaviour defined for, say, "37% collapsed and 63% hidden", so you can consider this as non-animatable.)

3. Using opacity, you can not make a child element more opaque than its parent. E.G. if you have a p with color:black and opacity:0.5, you can not make any of its children fully black. Valid values for opacity are between 0 and 1, and this example would require 2!
   Consequently, according to Martin's comment, you can have a visible child (with visibility:visible) in an invisible parent (with visibility:hidden). This is impossible with opacity; if a parent has opacity:0; its children are always invisible.

4. Kornel's answer mentions that opacity values less than 1 create their own stacking context; no value for visibility does.
   (I wish I could think of a way to demonstrate this, but I can't think of any means to show the stacking context of a visibility:hidden element.)

5. According to philnash's answer, elements with opacity:0 are still read by screen readers, while visible:hidden elements are not.

6. According to Chris Noe's answer, visibility has more options (such as collapse) and elements that are not visible no longer respond to clicks and cannot be tabbed to.

(Making this a community wiki, since borrowing from the existing answers wouldn't be fair otherwise.)

Answer 6

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.