display vs visibility vs opacity
display: none retire l’élément de la mise en page, visibility: hidden le cache mais garde sa place, et opacity: 0 le rend transparent tout en le laissant cliquable.
Comparaison point par point
#Occupe une place dans la mise en page
- display: none
- Non, la place est libérée
- visibility: hidden
- Oui, un espace vide reste
- opacity: 0
- Oui, un espace vide reste
Peut être cliqué ou sélectionné avec Tab
- opacity: 0
- Oui, il réagit toujours aux clics et au focus
Visible pour les lecteurs d’écran
- opacity: 0
- Oui, il est toujours lu
Un enfant peut l’annuler
- display: none
- Non, tout le sous-arbre disparaît
- visibility: hidden
- Oui, via
visibility: visible - opacity: 0
- Sans objet, c’est une transparence purement visuelle
Animation fluide
- display: none
- Non, sans
transition-behavior: allow-discrete - visibility: hidden
- Change de façon brusque
- opacity: 0
- Oui, de façon fluide
Utilisation typique
- display: none
- Retrait complet de l’élément de la page
- visibility: hidden
- Réservation d’une place pour quelque chose qui apparaîtra plus tard
- opacity: 0
- Animations fluides d’apparition et de disparition
Exemple
#.item-none { display: none; }<div class="stage" style="display: flex; gap: 8px;">
<div class="box">1</div>
<div class="box item-none">display: none</div>
<div class="box">3</div>
</div>Définition et utilisation
#Ces trois façons de "cacher" un élément diffèrent par ce qui reste de sa présence sur la page. display: none retire complètement l’élément de la mise en page, avec la place qu’il occupait, comme s’il n’avait jamais existé. visibility: hidden le cache seulement, et sa place dans la mise en page reste vide. opacity: 0 garde aussi la place, mais l’élément reste structurellement tout à fait présent, seulement transparent visuellement.
Cette différence de présence se retrouve dans l’interaction. Un élément avec display: none ou visibility: hidden ne peut pas être cliqué ni sélectionné avec la touche Tab, et les lecteurs d’écran l’ignorent. Un élément avec opacity: 0 se comporte comme s’il était visible : il réagit aux clics, entre dans l’ordre de tabulation et est lu par les lecteurs d’écran, ce qu’il est facile d’oublier.
Cela compte aussi pour les animations. opacity change de façon continue, ce qui convient aux apparitions et disparitions animées. visibility change de façon brusque, mais on peut la combiner avec transition pour que l’élément disparaisse pour l’interaction exactement quand l’animation se termine. display ne participe par défaut à aucune transition, même si le plus récent transition-behavior: allow-discrete change cela.
Syntaxe
#display: none;
visibility: hidden;
opacity: 0;Plus d’exemples
#.item-hidden { visibility: hidden; }<div class="stage" style="display: flex; gap: 8px;">
<div class="box">1</div>
<div class="box item-hidden" style="visibility: hidden;">2</div>
<div class="box">3</div>
</div>La place de l’élément 2 reste vide, contrairement à display: none.
.ghost { opacity: 0; }<button class="ghost" type="button" onclick="this.textContent = 'Cliqué malgré opacity: 0'" style="padding: 8px 16px; border: 0; border-radius: 8px; background: #7c3aed; color: #fff;">Bouton invisible</button>Malgré son invisibilité, le bouton peut être cliqué et sélectionné avec la touche Tab, car opacity ne désactive pas l’interaction.
Bonnes pratiques
#- Pour une apparition animée d’un élément, utilisez
opacity, éventuellement associée àvisibilityettransition-behavior: allow-discrete. - Si l’élément doit disparaître complètement et libérer sa place, choisissez
display: none. - Un élément transparent mais toujours cliquable est une erreur fréquente. Ajoutez
pointer-events: nones’il ne doit pas réagir.
Entrées associées
#Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.