Propriété visibility du CSS
La propriété visibility est utilisée pour spécifier si un élément doit être visible ou masqué pour l'utilisateur.
Elle prend les valeurs suivantes : visible, hidden et collapse.
Lorsque l'élément est défini sur hidden, le contenu de cette balise devient entièrement transparent, mais il conserve son espace d'origine dans la mise en page. Les éléments descendants de l'élément masqué peuvent être visibles si visibility: visible leur est appliqué.
Si la valeur de la propriété visibility est définie sur collapse, elle est utilisée avec les éléments liés aux tableaux (tels que les lignes, les colonnes et les cellules) pour les retirer de la mise en page tout en préservant la structure du tableau.
attention
Certains navigateurs n'utilisent pas la valeur
collapse.
| Valeur initiale | visible |
|---|---|
| S'applique à | Tous les éléments (collapse s'applique uniquement aux éléments liés aux tableaux). |
| Héritée | Oui. |
| Animable | Oui. |
| Version | CSS2 |
| Syntaxe DOM | Object.style.visibility = "collapse"; |
Syntaxe
Syntaxe de la propriété CSS visibility
visibility: visible | hidden | collapse | initial | inherit | revert | revert-layer;Exemple de la propriété visibility avec la valeur "hidden" :
Exemple de la propriété CSS visibility avec la valeur hidden
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
visibility: hidden;
}
</style>
</head>
<body>
<h2>Visibility property example.</h2>
<div>Here is some text for example.</div>
<p>Text, which will not be displayed in browser.</p>
<div>
You see space above this sentence, but actually there is some text, which has visibility property with hidden value.
</div>
</body>
</html>Résultat
Exemple de la propriété visibility avec les valeurs "visible" et "hidden" :
Exemple de la propriété CSS visibility avec les valeurs visible et hidden
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.test1 {
visibility: visible;
}
.test2 {
visibility: hidden;
}
</style>
</head>
<body>
<h2>Visibility property example</h2>
<p class="test1">Lorem Ipsum is simply dummy text.</p>
<p class="test2">Lorem Ipsum is simply dummy text.</p>
<p>The space above is a hidden text.</p>
</body>
</html>Exemple de la propriété visibility avec la valeur "collapse" :
Exemple avec la propriété CSS visibility avec la valeur collapse
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.collapse {
visibility: collapse;
}
table {
border: 2px solid #666;
}
td {
border: 1px solid #ccc;
}
</style>
</head>
<body>
<h2>Visibility property example</h2>
<p>Here the "collapse" value is applied.</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>Valeurs
| Valeur | Description | Tester |
|---|---|---|
| visible | Dans ce cas, la balise est visible. Il s'agit de la valeur par défaut de cette propriété. | Tester » |
| hidden | Cette valeur masque uniquement les éléments visuellement. | Tester » |
| collapse | Utilisé avec des éléments de tableau spécifiques (lignes, groupes de lignes, colonnes, groupes de colonnes) pour supprimer des lignes ou des colonnes entières. Cette valeur a la même signification que "hidden" lorsqu'elle est utilisée avec d'autres éléments. | Tester » |
| initial | Définit la propriété sur sa valeur par défaut. | Tester » |
| inherit | Hérite la propriété de son élément parent. | |
| revert | Rétablit la propriété à sa valeur héritée ou initiale, selon le cas. | Tester » |
| revert-layer | Rétablit la propriété à la valeur définie dans la couche précédente de la cascade. | Tester » |
Pratique
Quelles sont les valeurs possibles de la propriété CSS 'visibility' ?