css Différence entre visibility et display ?

Audrey

Membre
Bonjour,

Question du jour : quelle est la différence entre les balises visibility et display ?
Je ne saisis pas bien parce que visuellement le résultat est le même.

Je suppose que c'est du côté des navigateurs/robots que cela change quelque chose, mais quoi ?
Thanks !
 
Solution
Salut Audrey,

Alors je ne sais pas sur quel élément tu appliques ces propriétés mais tu devrais voir une différence plus ou moins visible suivant la taille de l'élément concerné.

Avec visibility: hidden; comme son nom l'indique on cache l'élément de la vue sur le navigateur et donc de l'utilisateur côté client. Si par exemple tu appliques cette propriété à une <bloc> comme celui-ci:
CSS
.bloc {
    border: 1px solid blue;
    width: 500px;
    height: 300px;
    visibility: hidden;
}
dans le code suivant:
HTML
<span>Il était une fois Audrey...</span>
<div class="bloc">
    Voici un gros bloc html !
</div>
<span>...et ses amis visibility et display</span>
et bien sur ta page web...

Anthony

Membre
Salut Audrey,

Alors je ne sais pas sur quel élément tu appliques ces propriétés mais tu devrais voir une différence plus ou moins visible suivant la taille de l'élément concerné.

Avec visibility: hidden; comme son nom l'indique on cache l'élément de la vue sur le navigateur et donc de l'utilisateur côté client. Si par exemple tu appliques cette propriété à une <bloc> comme celui-ci:
CSS
.bloc {
    border: 1px solid blue;
    width: 500px;
    height: 300px;
    visibility: hidden;
}
dans le code suivant:
HTML
<span>Il était une fois Audrey...</span>
<div class="bloc">
    Voici un gros bloc html !
</div>
<span>...et ses amis visibility et display</span>
et bien sur ta page web tu aurais un énorme espace vide de 500x300px entre tes 2 phrases !!
Alors qu'avec display: none;
CSS
.bloc {
    border: 1px solid blue;
    width: 500px;
    height: 300px;
    display: none;
}
Le bloc disparait aussi mais les éléments de la page peuvent occuper l'espace du bloc caché. Tes 2 <span> seront l'un au dessous de l'autre sans espace entre eux.

A+ !
 

L'occitan

Membre
Cela pourrait être utile pour cacher certains éléments à certains visiteurs d'un site sans dénaturer la charte graphique.
Par exemple :
  • si visiteur est enregistré alors le bloc de publicité est invisible
  • si le visiteur est non enregistré le bloc de pub est affiché
Cela fonctionnerait avec display également mais dans certains cas il est peut-être plus ergonomique de laisser un espace vide
 

Audrey

Membre
Pourquoi pas mais ça reste un peu tordu, désolé pour l'expression, comme méthode à mon avis.
Autant essayer via HTML d'arranger les choses si un bloc disparait dans certains cas, ergonomiquement je ne vois pas trop dans quel cas un vide serait plus pratique.
 

Nicolas

Membre
je ne vois pas trop dans quel cas un vide serait plus pratique.
Et bien il y a une bonne raison d'utiliser visibility plutôt que hidden c'est que l'on peut toujours appliquer sur un élément caché par hidden des propriétés supplémentaires. Par exemple sur la page d'accueil du forum j'ai utilisé ceci:
CSS
.p-title {
    visibility: hidden;
    margin-bottom: -30px;
}
Avec la marge négative cela me permet de réduire l'espace vide (qui fait 55px) et de le réduire de 30px. Si j'avais utilisé display: none; l'espace vide aurait totalement disparu sans que je puisse influer avec CSS sur l'élément et j'aurais été obligé d'appliquer une marge supplémentaire à un autre élément (situé au dessus ou au dessous de l'élément supprimé) ou de créer un élément vide et lui appliquer un min-height ou un padding important.

Dans ce cas, hidden est très pratique. ;)
 

Ces discussions pourraient vous intéresser...

Yo ! J'ai une div sans bordure remplie de cellules horizontales auxquelles j'applique une bordure sur le bord bas pour les séparer entre elles. Le problème c'est que la dernière je ne veux pas de bordure basse puisqu'il n'y a plus de cellule sous elle. Je n'ai pas la main sur le HTML...
Salut, Je suis en train de tester bootstrap sur mon localhost et j'ai un problème d'affichage. Je m'explique : Je veux afficher 4 colonnes qui contiennent chacune d'entre elles du texte mais j'ai beau chercher je ne comprends pas pourquoi elles s'affichent une au dessus des autres...
Hello tout le monde, J'ai découvert aujourd'hui sur le MarketPlace de Visual Studio Code l'extension Kite. (c'est une extension VSCode mais cela installe également le programme sur Windows). C'est une extension douée d'intelligence qui prédit ce que vous allez écrire et donc vous...
Haut