Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Our volunteers haven't translated this article into فارسی yet. Join us and help get the job done!

Summary

The visibility property can be used to hide an element while leaving the space where it would have been. It can also hide rows or columns of a table.

Initial valuevisible
Applies toall elements
Inheritedyes
Mediavisual
Computed valueas specified
Animation typea visibility
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Syntax

/* Keyword values */
visibility: visible;
visibility: hidden;
visibility: collapse;

/* Global values */
visibility: inherit;
visibility: initial;
visibility: unset;

Values

visible
Default value, the box is visible.
hidden
The box is invisible (fully transparent, nothing is drawn), but still affects layout.  Descendants of the element will be visible if they have visibility:visible (this doesn't work in IE up to version 7).
collapse
For table rows, columns, column groups, and row groups the row(s) or column(s) are hidden and the space they would have occupied is removed (as if display: none were applied to the column/row of the table). However, the size of other rows and columns is still calculated as though the cells in the collapsed row(s) or column(s) are present. This was designed for fast removal of a row/column from a table without having to recalculate widths and heights for every portion of the table. For XUL elements, the computed size of the element is always zero, regardless of other styles that would normally affect the size, although margins still take effect. For other elements, collapse is treated the same as hidden.

Interpolation

Visiblity values are interpolable between visible and not-visible. One of the start or ending values must therefore be visible or no interpolation can happen. If one of the values is visible, interpolated as a discrete step where values of the timing function between 0 and 1 map to visible and other values of the timing function (which occur only at the start/end of the transition or as a result of cubic-bezier() functions with y values outside of [0, 1]) map to the closer endpoint.

Formal syntax

visible | hidden | collapse

Examples

HTML Content

<p class="visible">The first paragraph is visible</p>
<p class="not-visible">The second paragraph is not visible.</p>
<p class="visible">The third paragraph is also visible. Notice the second paragraph is still occupying space.</p>

CSS Content

.visible {
  visibility: visible;
}

.not-visible {
  visibility: hidden;
}

Notes

The support for visibility:collapse is missing or partially incorrect in some modern browsers. In many cases it may not be correctly treated like visibility:hidden on elements other than table rows and columns.

visibility:collapse may change the layout of a table if the table has nested tables within the cells that are collapsed, unless visibility:visible is specified explicitly on nested tables.

Specifications

Specification Status Comment
CSS Basic Box Model
The definition of 'visibility' in that specification.
Working Draft No changes
CSS Transitions
The definition of 'visibility' in that specification.
Working Draft Defines visibility as animatable.
CSS Level 2 (Revision 1)
The definition of 'visibility' in that specification.
Recommendation Initial definition

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0[1] 1.0 (1.7 or earlier)[2] 4.0[4] 4.0[3] 1.0[1]
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 1.0 1.0[1] 1.0 (1.0)[2] 6.0 6.0[3] 1.0[1]

[1] Chrome and Safari treat visibility: collapse like hidden, leaving a white gap; they support it only on <tr>, <thead>, <tbody>, and <tfoot>, but not on <col> and <colgroup> elements.

[2] Firefox doesn’t hide borders when hiding <col> and <colgroup> elements if border-collapse: collapse is set.

[3] In Opera, visibility: collapse works on table elements, but doesn’t seem to hide a <tfoot> if it is adjacent to a visible <tbody>.

[4] Internet Explorer doesn't support visibility: initial.

Document Tags and Contributors

 Last updated by: MaxKorz,