132

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

Community
  • 1
  • 1
Chris Noe
  • 36,411
  • 22
  • 71
  • 92
  • 4
    And how about taborder? If visible=false then the control does not get any focus, but if opacity is 0 maybe the tab key still iterates between the controls? – Stefan Nov 07 '08 at 15:28
  • It would be an interesting test case to see how a transparent control might get focus. – Chris Noe Nov 07 '08 at 15:42
  • 3
    I tried that, (FF3). An input element with opacity:0 does receive focus, per the taborder, though there is no visual indication. The cursor just disappears. Whatever you type is entered into the value of the input element. Pressing tab again moves on to the next field. Interesting. – Chris Noe Nov 07 '08 at 19:10

9 Answers9

283

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.
Community
  • 1
  • 1
Chris Noe
  • 36,411
  • 22
  • 71
  • 92
  • I tried to follow the Markdown documentation here: http://daringfireball.net/projects/markdown/syntax – Chris Noe Nov 07 '08 at 19:03
  • Okay, so SO intentionally does not support . So I made it ascii.
     – Chris Noe Nov 07 '08 at 19:26
  • 3
    Also, with "opacity: 0" Flash objects are rendered, and sprite's constructor is triggered, but with "visibility: hidden" not. – pepkin88 Dec 30 '10 at 22:40
  • If your radio/checkboxes are not working with `visibility:hidden`, then you'd need to use `opacity: 0` instead for it to detect the mouse click. – dayuloli Mar 24 '15 at 07:11
  • 9
    @ChrisNoe: thanks for the summary. One thing you might want to add: I just researched how to make a parent node invisible but child nodes still visible, the result: **no chance for visible children:** `opacity:0` or `display:none`, **but** if you use `visibility: hidden` **you can make children visible** with `visibility: visible` – Martin Jan 29 '16 at 11:12
  • Your are CSS expert! – new2cpp Nov 17 '16 at 00:16
  • @ChrisNoe Good answer, but I recommend also mentioning how performance is affected by these properties. Opacity is the only one not triggering a reflow: https://csstriggers.com/opacity. – Fabian von Ellerts Oct 15 '19 at 12:53
15

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.

Kornel
  • 97,764
  • 37
  • 219
  • 309
12

No it does not. There is a big difference. They are similar because you can see through the element if visibility is hidden or opacity is 0, however

opacity: 0 : you can not click on elements behind it.

visibility: hidden : you can click on elements behind it.

Nishant
  • 4,659
  • 2
  • 27
  • 43
  • 1
    "No it does not"? Is this meant as an answer to the Question, or as a response to one of the existing Answers? If it is the later, then it should be added as a comment under the answer it addresses. – Chris Noe Dec 30 '15 at 17:59
  • 11
    This is an answer to "Does opacity:0 have exactly the same effect as visibility:hidden ?".... was that not obvious though ? – Nishant Dec 30 '15 at 19:22
8

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

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
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.

philnash
  • 70,667
  • 10
  • 60
  • 88
  • 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 Nov 07 '08 at 15:18
  • 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. – philnash Nov 07 '08 at 15:23
  • useful point, it is one of the result of setting visibility to hidden, but this is just the the tip of iceberg. More specifically, visibility:hidden makes it (seemingly) disappear from dom, while still maintaining its layout on page. – Nishant Jan 19 '16 at 10:01
4

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
  • 36,616
  • 34
  • 155
  • 231
  • What does it mean to have shape and be invisible? – Chris Noe Nov 07 '08 at 15:21
  • @chris, it means that they still take up the space on the page – Mitchel Sellers Nov 07 '08 at 15:22
  • 2
    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. Oct 10 '10 at 23:57
2

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.

MalcolmOcean
  • 2,807
  • 2
  • 29
  • 38
0

What Phil says is true.

IE supports opacity though:

filter:alpha(opacity=0);
Diodeus - James MacFarlane
  • 112,730
  • 33
  • 157
  • 176
0

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 The Human
  • 8,373
  • 7
  • 39
  • 60