visibility

  • Raccourci de la révision : CSS/visibility
  • Titre de la révision : visibility
  • ID de la révision : 355285
  • Créé :
  • Créateur : FredB
  • Version actuelle ? Non
  • Commentaire

Contenu de la révision

{{ CSSRef() }}

Résumé

La propriété CSS visibility est utilisée pour deux effets :

  1. La valeur hidden cache un élément mais laisse un espace là où il devrait être.
  2. La valeur collapse cache des rangs ou des colonnes d'un tableau.
  • {{Xref_cssinitial}} visible
  • S'applique à tous les éléments
  • {{Xref_cssinherited}} oui
  • Média {Xref_cssvisual}}
  • {{Xref_csscomputed}} comme spécifiée

Syntaxe

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

Valeurs

visible
L'élément s'affiche normalement.
hidden
L'élément est caché, mais les autres éléments sont positionnés comme s'il était affiché normalement. Cela agit comme si l'élément était totalement transparent. Les descendants avec la propriété visibility: visible seront à nouveau visibles.
collapse
Pour les rangs de tableau, les colonnes de tableau, les groupes de colonnes et les groupes de rangs de tableau, les rangs ou les colonnes sont cachés et l'espace qu'ils devraient occuper se comporte comme si la propriété {{ Cssxref("display") }}: none était appliquée aux rangs/colonnes du tableau. Cependant, la taille des autres rangs et colonnes est toujours calculée comme si les cellules des rangs et des colonnes fusionnés étaient toujours présentes. Cette propriété a été ainsi définie afin de supprimer rapidement un rang/une colonne d'un tableau sans avoir à recalculer les largeurs et les hauteurs de chaque portion du tableau. Pour les autres éléments, collapse est traité comme s'il s'agissait de hidden.

Exemples

{{ CSSRefExampleLink("PROPERTYNAME") }}

p        { visibility: hidden; }   /* Les paragraphes ne seront pas visibles             */
p.showme { visibility: visible; }  /* exceptés ceux appartenant à la classe showme       */
tr.col   { visibility: collapse; } /* Les rangées de tableau de classe col fusionneront  */

Notes

Le support de visibility: collapse est manquant ou partiellement incorrect dans quelques navigateurs modernes. Dans beaucoup de cas, il peut ne pas être correctement traité, comme si visibility: hidden, sur des éléments autres que des colonnes ou des rangs de tableau.

visibility:collapse peut changer la disposition d'un tableau si celui-ci a imbriqué des tableaux dans les cellules fusionnées. Sauf si visibility: visible a été explicitement spécifié dans les tableaux imbriqués.

Spécifications

Voir également

{{ Cssxref("display") }}

Source de la révision

<p>{{ CSSRef() }}</p>
<h2 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h2>
<p>La propriété <a href="/fr/docs/CSS" title="/fr/docs/CSS">CSS</a> <code>visibility</code> est utilisée pour deux effets&nbsp;:</p>
<ol>
  <li>La valeur <code>hidden</code> cache un élément mais laisse un espace là où il devrait être.</li>
  <li>La valeur <code>collapse</code> cache des rangs ou des colonnes d'un tableau.</li>
</ol>
<ul class="cssprop">
  <li><dfn>{{Xref_cssinitial}} </dfn><code>visible</code></li>
  <li><dfn>S'applique à&nbsp;</dfn>tous les éléments</li>
  <li><dfn>{{Xref_cssinherited}} </dfn>oui</li>
  <li><dfn>Média </dfn>{Xref_cssvisual}}</li>
  <li><dfn>{{Xref_csscomputed}} </dfn>comme spécifiée</li>
</ul>
<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
<pre class="eval">
<code>visibility</code>: <code>visible</code> | <code>hidden</code> | <code>collapse</code> | {{ Cssxref("inherit") }}
</pre>
<h3 id="Valeurs" name="Valeurs">Valeurs</h3>
<dl>
  <dt>
    <code>visible</code></dt>
  <dd>
    L'élément s'affiche normalement.</dd>
  <dt>
    <code>hidden</code></dt>
  <dd>
    L'élément est caché, mais les autres éléments sont positionnés comme s'il était affiché normalement. Cela agit comme si l'élément était totalement transparent. Les descendants avec la propriété <code>visibility: visible</code> seront à nouveau visibles.</dd>
  <dt>
    <code>collapse</code></dt>
  <dd>
    Pour les rangs de tableau, les colonnes de tableau, les groupes de colonnes et les groupes de rangs de tableau, les rangs ou les colonnes sont cachés et l'espace qu'ils devraient occuper se comporte comme si la propriété <code>{{ Cssxref("display") }}: none</code> était appliquée aux rangs/colonnes du tableau. Cependant, la taille des autres rangs et colonnes est toujours calculée comme si les cellules des rangs et des colonnes fusionnés étaient toujours présentes. Cette propriété a été ainsi définie afin de supprimer rapidement un rang/une colonne d'un tableau sans avoir à recalculer les largeurs et les hauteurs de chaque portion du tableau. Pour les autres éléments, <code>collapse</code> est traité comme s'il s'agissait de <code>hidden</code>.</dd>
</dl>
<h2 id="Exemples" name="Exemples">Exemples</h2>
<p>{{ CSSRefExampleLink("PROPERTYNAME") }}</p>
<pre class="eval">
p        { visibility: hidden; }   /* Les paragraphes ne seront pas visibles             */
p.showme { visibility: visible; }  /* exceptés ceux appartenant à la classe <i>showme</i>       */
tr.col   { visibility: collapse; } /* Les rangées de tableau de classe <i>col</i> fusionneront  */
</pre>
<h2 id="Notes" name="Notes">Notes</h2>
<p>Le support de <code>visibility: collapse</code> est manquant ou partiellement incorrect dans quelques navigateurs modernes. Dans beaucoup de cas, il peut ne pas être correctement traité, comme si <code>visibility: hidden</code>, sur des éléments autres que des colonnes ou des rangs de tableau.</p>
<p><code>visibility:collapse</code> peut changer la disposition d'un tableau si celui-ci a imbriqué des tableaux dans les cellules fusionnées. Sauf si <code>visibility: visible</code> a été explicitement spécifié dans les tableaux imbriqués.</p>
<h2 id="Sp.C3.A9cifications" name="Sp.C3.A9cifications">Spécifications</h2>
<ul>
  <li><a class="external" href="http://www.yoyodesign.org/doc/w3c/css2/visufx.html#visibility">CSS 2 (fr)</a></li>
  <li><a class="external" href="http://www.w3.org/TR/CSS21/visufx.html#visibility">CSS 2.1 (en)</a></li>
</ul>
<h2 id="Voir_.C3.A9galement" name="Voir_.C3.A9galement">Voir également</h2>
<p>{{ Cssxref("display") }}</p>
Revenir à cette révision