Propriété CSS visibility

La propriété visibility est utilisée pour spécifier l'élément qui doit être visible ou masqué à l'utilisateur.

Elle a les valeurs suivantes: visible, hidden et collapses.

Lorsque l'élément est défini à "hidden", le contenu de cette balise devient totalement transparent, mais son place sera affiché. Neanmoins, les éléments descendants de l'élément masqué peuvent être visibles si visibility:visible est appliquée à eux.

Certains navigateurs n'utilisent pas la valeur "collapse".

Valeur initiale	visible
Appliquée à	Tous les éléments.
Héritée	Oui.
Animable	Oui.
Version	CSS2
Syntaxe DOM	Object.style.visibility = "collapse";

Syntaxe

visibility: visible | hidden | collapse | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>             
      p {   	
      visibility:hidden;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété visibility.</h2>
    <div>Voici quelque texte par exemple.</div>
    <p>Texte, qui ne sera pas affiché en navigateur.</p>
    <div>Vous pouvez voir un espace ci-dessous cette phrase, mais réelement il y a quelque texte, qui a la propriété visibility avec la valeur "hidden".</div>
  </body>
</html>

Essayez-vous-même!

Un autre exemple, dans lequel les valeurs "visible" et "hidden" sont utilisées:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .test1 {
      visibility: visible;
      }
      .test2 {
      visibility: hidden;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété visibility</h2>
    <p class="test1">Lorem Ipsum est simplement du faux texte.</p>
    <p class="test2">Lorem Ipsum est simplement du faux texte.</p>
    <p>L'espace ci-dessous et un texte masqué.</p>
  </body>
</html>

Essayez-vous-même!

Un exemple avec la valeur "collapse":

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .collapse {
      visibility: collapse;
      }
      table {
      border: 2px solid #666;
      }
      td {
      border: 1px solid #ccc;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété visibility</h2>
    <p>Ici la valeur "collapse" est appliquée.</p>
    <table>
      <tr>
        <td>10</td>
        <td class="collapse">100</td>
        <td>1000</td>
      </tr>
      <tr>
        <td>20</td>
        <td>200</td>
        <td>2000</td>
      </tr>
      <tr class="collapse">
        <td>30</td>
        <td>300</td>
        <td>3000</td>
      </tr>
      <tr>
        <td>40</td>
        <td>400</td>
        <td>4000</td>
      </tr>
    </table>
  </body>
</html>

Essayez-vous-même!

Valeurs

Valeur	Description
visible	Dans ce cas, la balise est visible. C'est la valeur initiale de cette propriété.
hidden	Cette valeur ne masque l'élément que visuellement .
collapse	Utilisée avec les éléments particulaires de tableaux (lignes, groupes des lignes, colonnes, groupes des colonnes) pour rétirer des lignes ou des colonnes entières. Cette valeur a la même signification que "hidden" lorsqu'elle est utilisée avec d'autre éléments.
initial	Fait utiliser la valeur initiale.
inherit	Hérite la propriété de son élément parent.