mozilla

Revision 24571 of visibility

  • Revision slug: CSS/visibility
  • Revision title: visibility
  • Revision id: 24571
  • Created:
  • Creator: Waldo
  • Is current revision? No
  • Comment fix typo, try to clean up collapse text a bit (except that its effects are unclearly specified -- if you think my changes were wrong, let me know and we can figure out who's right)

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 or groups of table columns/rows.

Syntax

visibility: visible | 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 set visibility: visible to become visible again.
  • collapse: The collapse property is equivalent to hidden for most elements, with the exception of table columns, rows, and groups of table rows or table columns. In these cases, the effect is as if {{template.Cssxref("display")}}: none were applied to the column/row of the table, except that the contents of existing table cells are constrained to their current dimensions instead of recalculating them. This allows for fast removal of a row/column from a table without having to recalculate widths and heights for every portion of the table.

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 for visibility: collapse is missing or partially incorrect 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 or groups of 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>
<pre class="eval">visibility: visible | hidden | collapse | inherit
</pre>
<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 set <code>visibility: visible</code> to become visible again.
</li><li> <b>collapse</b>: The <code>collapse</code> property is equivalent to <code>hidden</code> for most elements, with the exception of table columns, rows, and groups of table rows or table columns.  In these cases, the effect is as if <code>{{template.Cssxref("display")}}: none</code> were applied to the column/row of the table, except that the contents of existing table cells are constrained to their current dimensions instead of recalculating them.  This allows for fast removal of a row/column from a table without having to recalculate widths and heights for every portion of the table.
</li></ul>
<h3 name="Examples"> Examples </h3>
<p>{{template.CSSRefExampleLink("PROPERTYNAME")}}
</p>
<pre class="eval">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 for <code>visibility: collapse</code> is missing or partially incorrect 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