MDN may have intermittent access issues April 18 13:00 - April 19 01:00 UTC. See whistlepig.mozilla.org for all notifications.

mozilla

Revision 24570 of visibility

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

Revision Content

{{template.CSSRef()}}

Summary

The visibility property is used to show/hide the given element. The value collapse should take effect only for table columns/rows.

Syntax

visibility: visibility | hidden | collapse | inherit

Values

  • visible: The generated box is visible. Note that this has no effect in certain situations (eg. when applying {{template.Cssxref("display")}}: none at the same time or working with <input type="hidden">)
  • hidden: The generated box is hidden, yet it is NOT removed from the actual flow of the page. It still affects layout. You can consider the box being fully transparent. Note that descendants of such box may be set visibility: visible to become visible again.
  • collapse: The collapse property takes effect only for table columns and rows. It has similar effect that {{template.Cssxref("display")}}: none applied to the column/row of the table, but it avoids remaining columns/rows to recalculate their width/height to fill the freed space. Such columns/rows should preserve their original dimensions.

Examples

{{template.CSSRefExampleLink("PROPERTYNAME")}}

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

  • Note that the support of visibility: collapse is missing, incorrent or only partial even in some modern browsers.

Specifications

See also

{{template.Cssxref("display")}}, {{template.Cssxref("position")}}, {{template.Cssxref("clip")}}, {{template.Cssxref("border-collapse")}}

{{ wiki.languages( { "pl": "pl/Dokumentacja_CSS/W\u0142asno\u015bci_szablonu" } ) }}

Revision Source

<p> 
{{template.CSSRef()}}
</p>
<h3 name="Summary"> Summary </h3>
<p>The <code>visibility</code> property is used to show/hide the given element. The value <code>collapse</code> should take effect only for table columns/rows.
</p>
<ul><li> <a href="en/CSS/initial_value">Initial value</a>: Visible
</li><li> Applies to: All elements
</li><li> <a href="en/CSS/inheritance">Inherited</a>: Yes
</li><li> Percentages: N/A
</li><li> Media: <a href="en/CSS/Media/Visual">Visual</a>
</li><li> <a href="en/CSS/computed_value">Computed value</a>: As specified
</li></ul>
<h3 name="Syntax"> Syntax </h3>
<p><code>visibility:</code> <code>visibility</code> | <code>hidden</code> | <code>collapse</code> | <code>inherit</code>
</p>
<h3 name="Values"> Values </h3>
<ul><li> <b>visible</b>: The generated box is visible. Note that this has no effect in certain situations (eg. when applying <code>{{template.Cssxref("display")}}: none</code> at the same time or working with <code>&lt;input type="hidden"&gt;</code>)
</li><li> <b>hidden</b>: The generated box is hidden, yet it is NOT removed from the actual flow of the page. It still affects layout. You can consider the box being fully transparent. Note that descendants of such box may be set <code>visibility: visible</code> to become visible again.
</li><li> <b>collapse</b>: The <code>collapse</code> property takes effect only for table columns and rows. It has similar effect that <code>{{template.Cssxref("display")}}: none</code> applied to the column/row of the table, but it avoids remaining columns/rows to recalculate their width/height to fill the freed space. Such columns/rows should preserve their original dimensions.
</li></ul>
<h3 name="Examples"> Examples </h3>
<p>{{template.CSSRefExampleLink("PROPERTYNAME")}}
</p>
<pre>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 name="Notes"> Notes </h3>
<ul><li> Note that the support of <code>visibility: collapse</code> is missing, incorrent or only partial even in some modern browsers.
</li></ul>
<h3 name="Specifications"> Specifications </h3>
<ul><li> <a class="external" href="http://www.w3.org/TR/CSS21/visufx.html#visibility">CSS 2.1</a>
</li></ul>
<h3 name="See_also"> See also </h3>
<p>{{template.Cssxref("display")}}, {{template.Cssxref("position")}}, {{template.Cssxref("clip")}}, {{template.Cssxref("border-collapse")}}
</p>{{ wiki.languages( { "pl": "pl/Dokumentacja_CSS/W\u0142asno\u015bci_szablonu" } ) }}
Revert to this revision