visibility

  • Revision slug: CSS/visibility
  • Revision title: visibility
  • Revision id: 359831
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment

Revision Content

{{ CSSRef() }}

Summary

The visibility CSS property has two purposes:

  1. The hidden value hides an element but leaves space where it would have been.
  2. The collapse value hides rows or columns of a table. It also collapses XUL elements.

  • {{ Xref_cssinitial() }} {{ cssinitial("visibility") }}
  • Applies to all elements
  • {{ Xref_cssinherited() }} yes
  • Media {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }} the specified keyword

Syntax

Formal syntax: {{csssyntax("visibility")}}
visibility: visible
visibility: hidden
visibility: collapse

visibility: inherit

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 (as if {{ Cssxref("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 value 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.

Examples

p        { visibility: hidden; }    /* paragraphs won't be visible */
p.showme { visibility: visible; }   /* except of these with class showme */
tr.col   { visibility: collapse; }  /* table rows with class col will collapse */

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
{{ SpecName('CSS3 Box', '#the-visibility-property', 'visibility') }} {{ Spec2('CSS3 Box') }} No changes.
{{ SpecName('CSS3 Transitions', '#animatable-css', 'visibility') }} {{ Spec2('CSS3 Transitions') }} Defines visibility as animatable.
{{ SpecName('CSS2.1', 'visufx.html#visibility', 'visibility') }} {{ Spec2('CSS2.1') }} Initial definition.

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 {{ CompatGeckoDesktop("1.0") }} 4.0 4.0 1.0
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 1.0 1.0 {{ CompatGeckoMobile("1.0") }} 6.0 6.0 1.0

See also

  • {{ CSS_Reference:Position() }}

Revision Source

<p>{{ CSSRef() }}</p>
<h2 id="Summary">Summary</h2>
<p><span class="seoSummary">The <code>visibility</code> CSS property has two purposes:</span></p>
<ol>
  <li><span class="seoSummary">The <code>hidden</code> value hides an element but leaves space where it would have been.</span></li>
  <li>
    <p><span class="seoSummary">The <code>collapse</code> value hides rows or columns of a table.</span> It also collapses XUL&nbsp;elements.</p>
  </li>
</ol>
<ul class="cssprop">
  <li><dfn>{{ Xref_cssinitial() }}</dfn> {{ cssinitial("visibility") }}</li>
  <li><dfn>Applies to</dfn> all elements</li>
  <li><dfn>{{ Xref_cssinherited() }}</dfn> yes</li>
  <li><dfn>Media</dfn> {{ Xref_cssvisual() }}</li>
  <li><dfn>{{ Xref_csscomputed() }}</dfn> the specified keyword</li>
</ul>
<h2 id="Syntax">Syntax</h2>
<pre class="twopartsyntaxbox">
<a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("visibility")}}
</pre>
<pre>
visibility: visible
visibility: hidden
visibility: collapse

visibility: inherit
</pre>
<h3 id="Values">Values</h3>
<dl>
  <dt>
    <code>visible</code></dt>
  <dd>
    Default value, the box is visible.</dd>
  <dt>
    <code>hidden</code></dt>
  <dd>
    The box is invisible (fully transparent, nothing is drawn), but still affects layout.&nbsp; Descendants of the element will be visible if they have <code>visibility:visible</code> (this doesn't work in IE up to version 7).</dd>
  <dt>
    <code>collapse</code></dt>
  <dd>
    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 (as if <code>{{ Cssxref("display") }}: none</code> 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&nbsp;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, <code>collapse</code> is treated the same as <code>hidden</code>.</dd>
</dl>
<h3 id="Interpolation">Interpolation</h3>
<p>Visiblity values are interpolable between <em>visible</em> and <em>not-visible</em>. One of the start or ending value must therefore be <em><code>visible</code></em> or no interpolation can happen. If one of the values is <code class="css">visible</code>, interpolated as a discrete step where values of the timing function between <code>0</code> and <code>1</code> map to <code class="css">visible</code> and other values of the timing function (which occur only at the start/end of the transition or as a result of <code class="css">cubic-bezier()</code> functions with y values outside of [0, 1]) map to the closer endpoint.</p>
<h2 id="Examples">Examples</h2>
<pre class="brush:css">
p        { visibility: hidden; }    /* paragraphs won't be visible */
p.showme { visibility: visible; }   /* except of these with class showme */
tr.col   { visibility: collapse; }  /* table rows with class col will collapse */
</pre>
<h3 id="Notes">Notes<!--32--></h3>
<p>The support for <code>visibility:collapse</code> is missing or partially incorrect in some modern browsers. In many cases it may not be correctly treated like <code>visibility:hidden</code> on elements other than table rows and columns.</p>
<p><code>visibility:collapse</code> may change the layout of a table if the table has nested tables within the cells that are collapsed, unless <code>visibility:visible</code> is specified explicitly on nested tables.</p>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{ SpecName('CSS3 Box', '#the-visibility-property', 'visibility') }}</td>
      <td>{{ Spec2('CSS3 Box') }}</td>
      <td>No changes.</td>
    </tr>
    <tr>
      <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'visibility') }}</td>
      <td>{{ Spec2('CSS3 Transitions') }}</td>
      <td>Defines <code>visibility</code> as animatable.</td>
    </tr>
    <tr>
      <td>{{ SpecName('CSS2.1', 'visufx.html#visibility', 'visibility') }}</td>
      <td>{{ Spec2('CSS2.1') }}</td>
      <td>Initial definition.</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>1.0</td>
        <td>{{ CompatGeckoDesktop("1.0") }}</td>
        <td>4.0</td>
        <td>4.0</td>
        <td>1.0</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Chrome for Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>1.0</td>
        <td>1.0</td>
        <td>{{ CompatGeckoMobile("1.0") }}</td>
        <td>6.0</td>
        <td>6.0</td>
        <td>1.0</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="See_also">See also</h2>
<ul>
  <li>{{ CSS_Reference:Position() }}</li>
</ul>
Revert to this revision