visibility : hidden, soit lui appliquer un display : none.
Ces deux méthodes vont toutes les deux nous permettre de cacher un élément. Cependant, elles ne sont pas équivalentes au sens où elles n’importent pas le design général de la page de la même manière.
Il existe en effet une différence de taille entre ces deux méthodes : appliquer un visibility: hidden sur un élément comme un div par exemple va simplement cacher cet élément mais ne va pas le retirer du flux de la page ce qui signifie que l’espace qu’il occupait lorsqu’il était visible va être conservé tandis qu’appliquer un display: none va non seulement masquer l’élément en question mais va en plus permettre aux autres éléments d’occuper l’espace de l’élément caché.
Pour bien comprendre cette différence, appuyons nous sur un exemple utilisant visibility : hidden et display : none.
Code HTML :
See the Pen
Tuto – Différence entre visibility : hidden et display : none by Pierre (@pierregiraud)
on CodePen.
Code CSS :
See the Pen
Tuto – Différence entre visibility : hidden et display : none by Pierre (@pierregiraud)
on CodePen.
Résultat :
See the Pen
Tuto – Différence entre visibility : hidden et display : none by Pierre (@pierregiraud)
on CodePen.
Dans cet exemple, j’utilise une grille CSS avec deux colonnes. Ma colonne de gauche est ma colonne “témoin” tandis que la colonne de droite est la colonne de test. Cela vous permet de bien voir les différences entre visibility : hidden et display : none.
Les deux colonnes possèdent ici exactement le même contenu, à savoir 4 div distincts dans lesquels on place différents éléments HTML dont notamment deux éléments span. Dans la colonne de gauche, tous les éléments sont affichés tandis que dans la colonne de droite on a appliqué des visibility : hidden ou display : none à certains éléments.
Dans la colonne “test” (colonne de droite), on applique visibility: hidden au premier div. Comme vous pouvez l’observer, cela masque le div et son contenu mais l’espace qui lui était originellement réservé est préservé. C’est tout simplement car visibility: hidden rend un élément invisible mais l’élément existe toujours dans le flux de la page.
On applique ensuite un display : none au troisième div de la colonne “test”. Cela cache à nouveau le div et son contenu mais cette fois-ci l’espace réservé à ce div redistribué aux autres éléments. En effet, comme vous pouvez le voir, le div numéro 4 se place là où était le div numéro 3. Lorsqu’on applique un display: none, cela ne fait pas que cacher un élément mais ça le retire également du flux de la page.
Vous pouvez à nouveau observer ce comportement au niveau de nos deux span : le span du deuxième div possède un visibility: hidden tandis que celui du quatrième div possède un display: none.
Comme vous pouvez le voir, l’espace occupé par le span avec visibility: hidden est conservé tandis que celui occupé par le span avec display: none est redistribué. C’est la grande différence entre visibility : hidden et display : none.
Si vous n’arrivez toujours pas à bien voir la différence entre visibility : hidden et display : none, imaginez vous dans une pièce avec deux autres personnes. La première personne se cache derrière un rideau tandis que la deuxième quitte la pièce.
La personne cachée n’est plus visible mais est toujours présente dans la pièce et occupe un espace : c’est l’équivalent de visibility : hidden. La personne qui a quitté la pièce n’est plus visible non plus mais n’occupe aucun espace dans la pièce puisqu’elle n’est plus dedans : c’est l’équivalent de display: none.
