visibility en CSS : masquer un élément sans jamais bouger la mise en page

Deux propriétés semblent faire exactement la même chose au premier regard : masquer un élément. Pourtant visibility: hidden et display: none produisent des résultats très différents sur le reste de la page, et confondre les deux crée des bugs de mise en page difficiles à repérer, parce que rien ne signale l'erreur dans la console.

Le choix entre les deux dépend d'une seule question : le reste de la page doit-il réagir à la disparition de l'élément, ou faut-il que sa place reste intacte, comme un fantôme invisible mais toujours présent ?

Définition

visibility: hidden rend un élément totalement invisible à l'écran, sans jamais retirer la place qu'il occupe dans la mise en page. Ses voisins ne bougent pas d'un pixel, exactement comme si l'élément était toujours là, simplement rendu transparent aux yeux et à la souris.

Comparaison avec display: none

Un enfant d'un élément en visibility: hidden peut redevenir visible en portant lui-même visibility: visible, ce qu'un enfant d'un élément en display: none ne pourra jamais faire : quand un ancêtre disparaît complètement de la mise en page, tout ce qu'il contient disparaît avec lui, sans exception possible.

Exemple concret : un badge qui garde sa place avant d'apparaître

.badge-notification {
  visibility: hidden;
}

.badge-notification.actif {
  visibility: visible;
}

Sur une icône de cloche avec un badge de notification, ce choix évite un petit décalage visuel : la place du badge reste réservée en permanence, si bien que son apparition ne pousse jamais la cloche ni les éléments voisins d'un ou deux pixels au moment où le badge devient visible. Avec display: none, ce même changement aurait provoqué un minuscule sursaut de la mise en page, perceptible surtout sur une interface dense où plusieurs icônes sont alignées côte à côte.

Cas d'usage : pourquoi choisir visibility plutôt que display

Une troisième valeur réservée aux tableaux : collapse

visibility accepte une troisième valeur, collapse, qui se comporte comme hidden sur la plupart des éléments mais prend un sens particulier sur une ligne ou une colonne de tableau : la ligne disparaît complètement, et les autres lignes remontent pour combler l'espace, comme si la ligne avait été supprimée du HTML. C'est un cas très ciblé, utile pour masquer dynamiquement une ligne de tableau sans recalculer toute la structure en JavaScript, mais rarement rencontré en dehors de ce contexte précis.

Questions fréquentes

Non, un élément en visibility: hidden est ignoré par les technologies d'assistance au même titre qu'un élément en display: none. La seule différence entre les deux concerne la mise en page visuelle, jamais l'accessibilité : aucune des deux valeurs ne convient pour cacher un élément uniquement à l'écran tout en le gardant lisible autrement.

Non. Même si l'espace reste réservé dans la mise en page, l'élément n'intercepte plus aucun événement de souris ni de clavier : impossible de le survoler, de le cliquer ou de lui donner le focus tant que sa visibility reste sur hidden.

Dès que la place laissée vide poserait elle-même un problème, par exemple un menu complet qui ne doit apparaître qu'au clic, sans laisser un grand espace blanc en permanence sur la page. Dans ce cas, retirer complètement l'élément de la mise en page avec display: none est le bon choix, quitte à perdre la possibilité de transitionner son apparition en douceur.