Revision 24574 of visibility

  • Revision slug: CSS/visibility
  • Revision title: visibility
  • Revision id: 24574
  • Created:
  • Creator: Fredchat
  • Is current revision? No
  • Comment adding fr

Revision Content

{{template.CSSRef()}}

Summary

The visibility property is used for two things:

  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.

Syntax

visibility: visible | hidden | collapse | {{template.Cssxref("inherit")}}

Values

visible
The element is displayed normally.
hidden
The element is hidden, but other elements are positioned as though it were present. This acts like the element is fully transparent. Note that descendants with visibility: visible can be visible again.
collapse
For table rows, table columns, table column groups, and table row groups, the row(s) or column(s) are hidden and the space they would have occupied is (as if {{template.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 for fast removal of a row/column from a table without having to recalculate widths and heights for every portion of the table. (For other elements, collapse is treated the same as hidden.)

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

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

See also

{{template.Cssxref("display")}}

{{ wiki.languages( { "fr": "fr/CSS/visibility", "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 for two things:
</p>
<ol><li> The <code>hidden</code> value hides an element but leaves space where it would have been.
</li><li> The <code>collapse</code> value hides rows or columns of a table.
</li></ol>
<ul><li> <a href="en/CSS/initial_value">Initial value</a>: <code>visible</code>
</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>visible</code> | <code>hidden</code> | <code>collapse</code> | {{template.Cssxref("inherit")}}
</p>
<h3 name="Values"> Values </h3>
<dl><dt> <code>visible</code></dt><dd> The element is displayed normally.
</dd><dt> <code>hidden</code></dt><dd> The element is hidden, but other elements are positioned as though it were present.  This acts like the element is fully transparent.  Note that descendants with <code>visibility: visible</code> can be visible again.
</dd><dt> <code>collapse</code></dt><dd>  For table rows, table columns, table column groups, and table row groups, the row(s) or column(s) are hidden and the space they would have occupied is  (as if <code>{{template.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 for fast removal of a row/column from a table without having to recalculate widths and heights for every portion of the table.  (For other elements, <code>collapse</code> is treated the same as <code>hidden</code>.)
</dd></dl>
<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>
<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>
<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")}}
</p>{{ wiki.languages( { "fr": "fr/CSS/visibility", "pl": "pl/Dokumentacja_CSS/W\u0142asno\u015bci_szablonu" } ) }}
Revert to this revision