Propriété CSSMise en page et positionnement

visibility

Masque un élément, mais laisse l’espace vide qu’il occupait.

Valeur initiale: visible
Héritée: Oui
Animable: oui, de façon abrupte (visible pendant toute la transition)
S’applique à: tous les éléments
JavaScript: element.style.visibility = "hidden"

Sur cette page

Exemple
Définition et utilisation
Syntaxe
Valeurs
Valeurs en pratique
Compatibilité des navigateurs
Bonnes pratiques
Entrées associées

Exemple

CSS

.tooltip {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s, visibility 0.2s;
}

.trigger:hover .tooltip {
  visibility: visible;
  opacity: 1;
}

Aperçu

Définition et utilisation

La propriété visibility affiche ou masque un élément sans changer la mise en page de la page. Un élément avec visibility: hidden devient invisible et ne peut plus être cliqué, mais son espace reste réservé. Cela le distingue de display: none, qui retire complètement l’élément.

Contrairement à la plupart des propriétés, visibility est héritée. L’enfant d’un parent masqué peut cependant définir visibility: visible et redevenir visible.

La propriété peut faire l’objet d’une transition en douceur, ce qui est utile pour les menus et les infobulles. On la combine le plus souvent avec opacity, pour que l’élément s’estompe d’abord, avant de devenir non cliquable.

Syntaxe

visibility: visible | hidden | collapse;

Valeurs

visible
L’élément est visible. La valeur par défaut.
hidden
L’élément 2 disparaît, mais l’espace qu’il laissait reste.
collapse
Sur les lignes et colonnes de tableaux, elle les supprime sans reconstruire le tableau. Sur les éléments ordinaires, elle se comporte comme hidden.

Valeur	Description
visible	L’élément est visible. La valeur par défaut.
hidden	L’élément 2 disparaît, mais l’espace qu’il laissait reste.
collapse	Sur les lignes et colonnes de tableaux, elle les supprime sans reconstruire le tableau. Sur les éléments ordinaires, elle se comporte comme `hidden`.

Valeurs en pratique

visible

L’élément est visible. La valeur par défaut.

.demo { visibility: visible; }

hidden

L’élément 2 disparaît, mais l’espace qu’il laissait reste.

.demo { visibility: hidden; }

collapse

Sur les lignes et colonnes de tableaux, elle les supprime sans reconstruire le tableau. Sur les éléments ordinaires, elle se comporte comme hidden.

.demo { visibility: collapse; }

Compatibilité des navigateurs

Largement disponible

Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.

Chrome
Edge
Firefox
Safari

Bonnes pratiques

Un élément masqué avec visibility: hidden occupe toujours de la place. S’il doit disparaître avec l’espace qu’il occupait, utilisez display: none.
Les lecteurs d’écran ignorent les éléments avec visibility: hidden, tout comme ceux avec display: none.

Entrées associées

Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.

Leçons gratuitesPratiquez CSS dans le cours HTML et CSSDes exercices avec indices, un éditeur de code et une progression enregistrée au fur et à mesure.Voir le cours