CSS - Propriété visibility

Description.

La propriété visibility définit la visibilité d'un élément. Attention : dans la plupart des cas, même lorsque l'élément n'est pas visible, son emplacement est conservé.

Voir aussi la propriété CSS display qui peut aussi masquer un élément avec la valeur none.

Syntaxes pour visibility.

• visibility: visible;

  Valeur par défaut. L'élément est visible.

• visibility: hidden;

  L'élément n'est pas visible mais sa place est réservée.

• visibility: collapse;

  L'élément n'est pas visible et sa place n'est pas réservée. Cette valeur ne s'applique qu'à certains éléments des tableaux :

  1. tr (ligne de tableau) : la ligne est masquée et les lignes suivantes sont remontées à sa place.
  2. tbody (corps de tableau) : le corps du tableau disparait, ainsi que son emplacement.
  3. col : colonne de tableau : la colonne est masquée et son emplacement est récupéré. Les colonnes suivantes sont décalées vers la gauche mais leur largeur n'est pas modifiée (la largeur du tableau est donc réduite).
  4. colgroup (groupe de colonnes de tableau) : même comportement que pour les colonnes.
  5. td (cellule de tableau) : la cellule est invisible mais le tableau n'est pas restructuré. Il y a donc une case blanche à la place de la cellule. collapse est équivalent à hidden.

  Pour tous les autres types d'éléments, la valeur collapse est équivalente à hidden.

• visibility: initial;

  La valeur initiale est visible.

• visibility: unset; visibility: inherit;

  Reportez-vous à la description générale de ces valeurs.

Simulateur.

Le simulateur applique la propriété visibility sur plusieurs éléments de types différents (les éléments concernés sont sur fond bleu) :

• Un élément du type bloc (div).
• Un élément du type inline (sapn).
• Une ligne du tableau (deuxième ligne).
• Un cellule de tableau (celle de Janvier).

Voir aussi...

Affichage/masquage d'éléments - Propriétés.

• display : Type de l'élément et la façon de l'afficher.