Propriété CSS visibility
La propriété CSS visibility définit si un élément est visible ou masqué. Découvrez des exemples et essayez-les par vous-même.
La propriété CSS visibility contrôle si un élément est affiché ou masqué sans modifier la mise en page — un élément masqué conserve exactement l'espace qu'il occuperait s'il était visible. Cette page couvre les trois valeurs principales (visible, hidden, collapse), les différences entre visibility, display et opacity, les implications en matière d'accessibilité lors du masquage de contenu, ainsi que des exemples exécutables pour chaque valeur.
Ce que fait visibility
La valeur la plus utilisée est hidden. Lorsque vous définissez visibility: hidden, l'élément devient invisible mais occupe toujours sa place dans la mise en page — le contenu environnant ne se déplace pas pour combler l'espace vide. L'élément est également retiré de l'ordre de tabulation et n'est pas annoncé par les lecteurs d'écran, ce qui le rend véritablement masqué pour les technologies d'assistance, et pas seulement visuellement.
Une particularité notable : visibility est héritée, mais un enfant peut la remplacer. Si un parent possède visibility: hidden, un descendant avec visibility: visible réapparaîtra même si son ancêtre est masqué.
La valeur collapse est réservée aux éléments liés aux tableaux (<tr>, <col>, groupes de lignes, groupes de colonnes). Pour ces éléments, elle supprime entièrement la ligne ou la colonne — comme le ferait display: none — de sorte que le reste du tableau se réorganise pour combler l'espace, mais les largeurs de colonnes du tableau restent calculées comme si la ligne était toujours présente. Sur les éléments qui ne sont pas des tableaux, collapse se comporte simplement comme hidden.
La prise en charge de collapse sur les éléments de tableau est incohérente selon les navigateurs : certains moteurs le rendent de manière identique à hidden (la ligne conserve son espace visible). Si vous avez besoin qu'une ligne disparaisse vraiment sur tous les navigateurs, utilisez plutôt display: none sur le <tr>.
visibility vs. display vs. opacity
Ces trois propriétés « masquent » toutes un élément, mais leur comportement diffère — choisir la mauvaise est une erreur fréquente.
| Propriété | Conserve l'espace ? | Dans l'arbre d'accessibilité ? | Reçoit les événements ? |
|---|---|---|---|
visibility: hidden | Oui | Non | Non |
display: none | Non (s'effondre) | Non | Non |
opacity: 0 | Oui | Oui | Oui |
Utilisez visibility: hidden lorsque vous souhaitez réserver l'espace de l'élément tout en masquant son contenu (par exemple, basculer un espace réservé sans que la page ne saute). Utilisez display: none lorsque vous voulez que l'élément disparaisse et que la mise en page se referme. Utilisez opacity: 0 uniquement lorsque vous souhaitez un élément toujours interactif et toujours lisible par les lecteurs d'écran — par exemple, un élément que vous faites apparaître ou disparaître en fondu.
Comme visibility est animable, vous pouvez la combiner avec opacity pour un fondu de sortie qui se termine avec un élément complètement masqué et non interactif :
.fade {
opacity: 1;
visibility: visible;
transition: opacity 0.3s, visibility 0s linear 0.3s;
}
.fade.is-hidden {
opacity: 0;
visibility: hidden;
}| Valeur initiale | visible |
|---|---|
| S'applique à | Tous les éléments (collapse s'applique uniquement aux éléments liés aux tableaux). |
| Hérité | 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 de 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 | Essayer |
|---|---|---|
| visible | Dans ce cas, la balise est visible. Il s'agit de la valeur par défaut de cette propriété. | Essayer » |
| hidden | Cette valeur masque uniquement visuellement les éléments. | Essayer » |
| collapse | Utilisé avec des éléments de tableau particuliers (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. | Essayer » |
| initial | Applique la valeur par défaut de la propriété. | Essayer » |
| inherit | Hérite de la propriété de son élément parent. | |
| revert | Rétablit la propriété à sa valeur héritée ou initiale, selon ce qui s'applique. | Essayer » |
| revert-layer | Rétablit la propriété à la valeur définie dans la couche précédente de la cascade. | Essayer » |
Propriétés associées
- CSS
display— masquer un élément et supprimer son espace de la mise en page. - CSS
opacity— rendre un élément transparent tout en le gardant interactif. - CSS
overflow— contrôler le contenu qui déborde de sa boîte. - CSS
position— déplacer des éléments hors du flux normal.